Блог

Главная - Вопросы по программированию - Angular ngFor в многомассиве

Angular ngFor в многомассиве

#angular #typescript #loops #ngfor

#angular #typescript #циклы #ngfor

Вопрос:

У меня есть такой массив

   array = [
    {
      naslov: 'Naslov1',
      podnaslov: 'Podnaslov1',
      odgovori: {
        odgovor0: 'Odgovor 11',
        odgovor1: 'Odgovor 12'
      }
    },
    {
      naslov: 'Naslov2',
      podnaslov: 'Podnaslov2',
      odgovori: {
        odgovor0: 'Odgovor 21',
        odgovor1: 'Odgovor 22'
      }
    },
    {
      naslov: 'Naslov3',
      podnaslov: 'Podnaslov3',
      odgovori: {
        odgovor0: 'Odgovor 31',
        odgovor1: 'Odgovor 32'
      }
    }
  ];

Я пытаюсь выполнить цикл внутри html подобным образом, но мне не удалось получить поле одговори. Вот мой html

   <div *ngFor="let item of array, let i=index">
    <h1>{{item.naslov}}</h1>
    <p>{{item.podnaslov}}</p>
    <div *ngFor="let odgovor of item.odgovori[i], let i=index">
      <p>{{odgovor}}{{i}}</p>
    </div>
  </div>

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

1. odgovori является объектом, а не массивом. Попробуйте KeyValuePipe .

Ответ №1:

Поскольку odgovori это объект, а не массив, вам нужно будет использовать keyvalue канал: https://angular.io/api/common/KeyValuePipe

 <div *ngFor="let odgovor of item.odgovori | keyvalue, let i=index">
  <p>{{odgovor.value}}{{i}}</p>
</div>

Или, судя по ключам в вашем odgovori объекте, вы, вероятно, могли бы сделать это следующим образом:

 <div *ngFor="let odgovor of item.odgovori | keyvalue">
  <p>{{odgovor.key}}</p>
</div>

Ответ №2:

Попробуйте этот код.

 <div *ngFor="let item of array, let i=index">
    <h1>{{item.naslov}}</h1>
    <p>{{item.podnaslov}}</p>
    <div *ngFor="let odgovor of item.odgovori | keyvalue, let i=index">
        <p>{{odgovor.value}}</p>
    </div>
</div>