Angular 5 - 数据循环不显示子项目上的多个记录

Question

我试图获取数据以显示父容器和要显示的父容器的子项。

这是数据：

constructor() {
    this.datas = [
      {
        title: 'Container 1',
        'resizable': true,
        childItems: [
          {'item': 'item 1'},
          {'item': 'item 2'}
        ]
      }
    ];

以下是获取数据的代码：

<div *ngFor="let data of datas">

  <div [ngWidgetContainer]="data">
    <div [ngWidget]="data.childItems">List Child Items belonging to this Container</div>
  </div>

</div>

数据的问题是它应该列出2个childItems，但它只列出1。

我怎样才能解决这个问题？

Answer 1

由于你有prop的childItems，由两个元素组成，你需要从数据对象而不是数据数组循环它的项目。因此，首先* ngFor允许您运行数据数组，第二个* ngFor允许您运行childItems属性数组。

<div *ngFor="let data of datas">

  <div [ngWidgetContainer]="data" *ngFor="let item of data.childItems"> 
    <div [ngWidget]="item">List Child Items belonging to this Container</div>
  </div>

</div>