Как показать дочерние элементы как родители, используя угловой 6 нг

Question

У меня есть набор данных JSON, который сам по себе является массивом, и каждый объект может содержать вложенные массивы.

Мне нужно показать элементы во внутреннем вложенном массиве как элементы родительского массива, которые будут отображаться с использованиемУгловой 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'
          }
        ]
      }]
    }]
  }
}

Вот демоверсия 1013 *