Блог

Главная - Вопросы по программированию - Как показать дочерние элементы в качестве родителей с помощью angular 6 ngFor

Как показать дочерние элементы в качестве родителей с помощью angular 6 ngFor

#javascript #html #angular

#javascript #HTML #angular

Вопрос:

У меня есть набор данных 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

Комментарии:

1. что вы пробовали? с какой проблемой вы столкнулись???

2. Я попробовал ngFor внутри родительского ngFor, но не смог получить представление о том, как получить ссылку на третий уровень.

3. вы можете использовать канал KeyValue для упрощения этого цикла

Ответ №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'
          }
        ]
      }]
    }]
  }
}

Вот демонстрация