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