ngFor里面的ngFor

Question

我有Angular + Firebase應用程序。 在我的一個組件中，我從Firebase DB獲取元素並使用* ngFor將它們綁定到模板中：

<div *ngFor="let comment of (comments | async)>
   <div>{{ comment.text }}</div>
</div>

但每條comment也都有answers清單：

我如何在循環中綁定答案，例如，類似這樣的事情：

<div *ngFor="let comment of (comments | async)>
   <div>{{ comment.text }}</div>

   <div *ngFor="let answer of comment.answers">
     {{ answer.text }}
   </div
</div>

此結構不起作用並返回錯誤：

找不到'對象'類型的不同支持對象'[object Object]'。 NgFor僅支持綁定到諸如Arrays之類的Iterables。

Answer 1

answers屬性是一個對象。 在將其顯示在*ngFor循環中之前，必須將其轉換為數組。

component.html

<div *ngFor="let comment of (comments | async)>
   <div>{{ comment.text }}</div>

   <div *ngFor="let answer of toArray(comment.answers)">
     {{ answer.text }}
   </div
</div>

component.ts

export class Component {
  toArray(answers: object) {
    return Object.keys(answers).map(key => answers[key])
  }
}

如果要保留密鑰，也可以將其合並到地圖調用中的對象中。

export class Component {
  toArray(answers: object) {
    return Object.keys(answers).map(key => ({
      key,
      ...answers[key]
    }))
  }
}

Answer 2

下面的代碼對我有用; 角度7離子4;

  <ion-item (click)="navigate(oB.ogretmen_id)" class="OgretmenOzellikler" color="primary" *ngFor="let oB of ogretmenBilgi">

            <ion-label>
                <h3>{{oB.ogretmen_ad}} {{oB.ogretmen_ad}}</h3>
                <ion-label>{{oB.ogretmen_brans}}</ion-label>

                <p *ngFor="let key of oB.Dersler">
                    <ion-icon name="bookmarks"></ion-icon>{{key.ders_ad}}
                </p>


            </ion-label>
        </ion-item>

response of ogretmenBilgi
    Dersler: Array(2)
    0: {ders_ad: "Vatandaşlık", kategori_ad: "ilk öğretim takviye"}
    1: {ders_ad: "Yabancı Dil", kategori_ad: "ilk öğretim takviye"}
    length: 2
    __proto__: Array(0)
    ogretmen_ad: "Ad"
    ogretmen_brans: "Brans"