Angular 2 组件转发器基于数据模型数组中的项目

Question

一个简单的数据模型：

export class Artboard {
    private layers: Array<Layer> = new Array<Layer>();

    constructor(layersParam: Layer[] = null) {
        this.layers = layersParam;
    }
}

传递到相应的组件：

<app-ipe-container>
    <app-ipe-artboard [artboard]="artboard"></app-ipe-artboard>
</app-ipe-container>

@Component({
    selector: 'app-ipe-artboard'
})
export class ArtboardComponent {
    @Input() public artboard: Artboard;
}

到目前为止一切顺利。现在，在这个 artboard.component 中重复图层数组（已填充）以创建 layer.component（并且还通过图层对象）。

<app-ipe-artboard-layer *ngFor="let layer of artboard.layers" [layer]="layer"></app-ipe-artboard-layer>

"Unfortunately" 这还行不通。浏览器的检查器揭示了这一点：

<!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}-->

...而不是有多个 <app-ipe-artboard-layer> 组件/标签。

如何实现这个逻辑？

Answer 1

此 html 注释在 Angular 中呈现时，部分模板未呈现，因为它包含在 *ngIf 块或 *ngSwitchcase 中。看起来整个块都没有渲染。

Angular 2 组件转发器基于数据模型数组中的项目

Angular 2 Component repeater based upon items in data model array

data-binding

angular2-template

angular