如何使用 Angular 6 ngFor 将子元素显示为父元素答案

【问题标题】：How to show child elements as parents using angular 6 ngFor如何使用 Angular 6 ngFor 将子元素显示为父元素
【发布时间】：2019-04-12 04:43:45
【问题描述】：

我有一个 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

【问题讨论】：

你尝试过什么？你遇到的问题在哪里？？？
我在父级 ngFor 中尝试了 ngFor，但无法了解如何获取对第三级的引用。
你可以使用 KeyValue 管道来简化这个循环

标签： javascript html angular

【解决方案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

【讨论】：