ngFor内部ngFor

Question

我有角形+ 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>

此结构不工作，并返回错误：

无法找到“对象”类型的不同支持对象“对象对象”。NgFor只支持绑定到诸如数组之类的Iterable。

Answer 1

属性是一个对象。在*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"