给出的结构指令无法绑定属性名称

Question

我正在试用一本书中的教程并收到错误：“无法从 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 < this.dataSource.length; i++)，数据源具有名称为属性的产品人口稠密。我还尝试在 item: item?.name 之后放置一个 elvis 运算符。但是 table 不显示名字。

调用堆栈如下：

core.js:6185 ERROR TypeError: Cannot read property 'name' of undefined
at ProductComponent_table_5_ng_template_9_Template (template.html:18) at executeTemplate (core.js:11949) at refreshView (core.js:11796) at refreshDynamicEmbeddedViews (core.js:13154) at refreshView (core.js:11819) at refreshDynamicEmbeddedViews (core.js:13154) at refreshView (core.js:11819) at refreshComponent (core.js:13229) at refreshChildComponents (core.js:11527) at refreshView (core.js:11848)

Answer 1

它发生了。

你打错了

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

应该是$implicit

给出的结构指令无法绑定属性名称

Structural directive giving cannot bind property name

angular

angular2-directives

给出的结构指令无法绑定 属性 名称

Structural directive giving cannot bind property name

angular

angular2-directives

给出的结构指令无法绑定属性名称