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>

“不幸的是”这不起作用。浏览器的检查员揭示了这一点：

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

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

如何实现这个逻辑？

Answer 1

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

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

1 个答案: