angular - ngFor 内部 ngFor

Question

我有 Angular + Firebase 应用程序。在我的一个组件中，我从 Firebase DB 获取元素并使用 *ngFor 将它们绑定(bind)到模板中:

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

但每个评论也有answers列表:

我如何在我的循环中绑定(bind)答案，例如，像这样:

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

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

这个结构不起作用并返回错误:

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

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])
  }
}

如果要保留 key ，也可以将其合并到映射调用中的对象中。

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