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

如何使用角度6 ngFor将子元素显示为父元素

1 个答案: