结构指令不能绑定属性名答案

【问题标题】：Structural directive giving cannot bind property name结构指令不能绑定属性名
【发布时间】：2021-05-30 09:45:28
【问题描述】：

我正在尝试书中的教程并收到错误：“无法从 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 错误类型错误：无法读取未定义的属性“名称”
在 ProductComponent_table_5_ng_template_9_Template (template.html:18) 在执行模板 (core.js:11949) 在 refreshView (core.js:11796) 在 refreshDynamicEmbeddedViews (core.js:13154) 在 refreshView (core.js:11819) 在 refreshDynamicEmbeddedViews (core.js:13154) 在 refreshView (core.js:11819) 在 refreshComponent (core.js:13229) 在 refreshChildComponents (core.js:11527) 在 refreshView (core.js:11848)

【问题讨论】：

标签： angular angular2-directives

【解决方案1】：

它发生了。

你有错别字

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

应该是$implicit

【讨论】：