javascript - 如何使用 Angular 6 ngFor 将子元素显示为父元素

Question

我有一个 JSON 数据集，它本身就是一个数组，每个对象可能包含子数组。

我需要将内部嵌套数组中的元素显示为父数组的元素，以便使用 Angular NgFor 显示。

以下是我的输入格式:

[{
  'id': 1,
  'title': 'One',
  'data': [{
    'id': 200,
    'dataset': [{
        'id': 300,
        'name': 'Duke',
      },
      {
        'id': 301,
        'name': 'Bajaj'
      }
    ]
  }]
}]

我需要显示为:

1  One (outer element)
   300   Duke (innermost element)
   301   Bajaj

Answer 1

您需要迭代数据。使用*ngFor。对于第三级，您可能需要另一个嵌套的 *ngFor 因为 data 又是另一个数组中的数组

在 html 文件中

<ul *ngFor="let item of data; let i = index" [attr.data-index]="i">
  <li>{{item.title}}</li>
  <li *ngFor="let elem of item.data; let x = index2">

    <div *ngFor="let name of elem.dataset; let y = index3">
      <span>{{name.id}}</span><span>{{name.name}}</span>
    </div>


  </li>
</ul>

在组件文件中

export class AppComponent implements OnInit {
  name = 'Angular';
  data;

  ngOnInit() {
    this.data = [{
      'id': 1,
      'title': 'One',
      'data': [{
        'id': 200,
        'dataset': [{
            'id': 300,
            'name': 'Duke',
          },
          {
            'id': 301,
            'name': 'Bajaj'
          }
        ]
      }]
    }]
  }
}

这是demo