Angular 结构指令不能绑定属性名

Angular 结构指令不能绑定属性名,angular,angular2-directives,Angular,Angular2 Directives,我在一本书中尝试了一个教程,得到了一个错误:“无法从html中读取未定义的属性'name' 以下是iterator.directive.ts中的代码: import { Directive, Input, TemplateRef, ViewContainerRef } from "@angular/core"; @Directive({ selector: '[paForOf]' }) export class PaItera

我在一本书中尝试了一个教程,得到了一个错误:“无法从html中读取未定义的属性'name'

以下是iterator.directive.ts中的代码:

    import { Directive, Input, TemplateRef, ViewContainerRef } from "@angular/core";

    @Directive({
        selector: '[paForOf]'
    })
    export class PaIteratorDirective {
        constructor(private container: ViewContainerRef, 
            private template: TemplateRef<Object>) {}

        @Input('paForOf')
        dataSource:any;

        ngOnInit() {
            this.container.clear();
            for (let i=0; i < this.dataSource.length; i++) {
                this.container.createEmbeddedView(this.template,
                    new PaIteratorContext(this.dataSource[i]));
            }
        }
    }
    class PaIteratorContext {
        constructor(public $implict: any) {}
    }
以下是html:

        <div class="row m-2">
        <div class="checkbox">
            <label>
                <input type="checkbox" [(ngModel)]="showTable" />
                Show Table
            </label>
        </div>
        <table *paIf="showTable" class="table table-sm table-bordered table-striped">
            <thead>
                <th></th>
                <th>Name</th>
                <th>Category</th>
                <th>Price</th>
            </thead>
            <tbody>
                <ng-template [paForOf]="getProducts()" let-item>
                    <tr>
                        <td colspan="4">
                            {{item.name}}
                        </td>
                    </tr>
                </ng-template>
            </tbody>
        </table>
    </div>
错误发生在{{item.name}上

以下是我所做的分析:

在控制台中,在iterator.directive.ts行上,对于let i=0;i 以下是调用堆栈:

core.js:6185错误类型错误:无法读取未定义的属性“name” 在ProductComponent\u table\u 5\u ng\u template\u 9\u template template.html:18 在executeTemplate core.js:11949 在refreshView core.js:11796 在RefreshDynamicBeddedViews core.js:13154 在refreshView core.js:11819 在RefreshDynamicBeddedViews core.js:13154 在refreshView core.js:11819 在refreshComponent core.js:13229 在refreshChildComponents core.js:11527 在refreshView core.js:11848

这是常有的事

你有打字错误

class PaIteratorContext {
    constructor(public $implict: any) {}
                       ^^^^^^^^
}

应该是$implicit

这很烦人,但就像你说的那样。。