多数组中的Angular ngFor答案

【问题标题】：Angular ngFor in multiarray多数组中的Angular ngFor
【发布时间】：2020-12-24 03:20:44
【问题描述】：

我有这样的数组

  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 liket 中循环，但我没有设法获得字段 odgovori。这是我的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>

【问题讨论】：

odgovori 是一个对象，而不是一个数组。试试KeyValuePipe。

标签： angular typescript loops ngfor

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

【讨论】：