Angular 2 Firebase如何在对象中获取数组

Question

我正在从我的数据库中获取这个数组：

通过这个函数：

getMembers(){
  this.db.list(`projects/${this.auth.userId}/${this.uploadService.pro.name}/teams/`).snapshotChanges().pipe(
    map(changes =>
      changes.map(c => ({ key: c.payload.key, ...c.payload.val() }))
    )
  ).subscribe((data:any) => 
    console.log(data)
   this.members = data;
    )
}

如何在 ngFor 中显示成员？

我的尝试（第一个 ngFor 是团队 - 第二个是成员）：

<div *ngFor="let item of teams">
<p>{{item.name}}</p>
<p *ngFor="let member of item.members">{{member}}</p> //does not work
</div>

let member of item.member 出错：

找不到不同类型的支持对象“[object Object]” '目的'。 NgFor 只支持绑定到 Arrays 等 Iterables。

团队只是 - name:string - 成员在团队中。

export Interface Teams {
name: string;
}

export Interface Members {
name: string;
}

起初我上传团队 - 例如“程序员”。然后我将成员添加到该团队。它看起来像：

8468as6d84a6s8d4a6s8d4 {
name: Programmers;
members: {
FirstMember,
SeconndMemeber...
}
}

Answer 1

您收到错误，因为您的 members 是对象且对象不可迭代，而 *ngFor 仅支持 iterables 例如数组、映射等...，因此您可以：

使用Object.keys()，它将返回新数组中对象的键，

注意 Object 在模板中不可访问，因此您应该创建一个管道或在 component.ts 中定义一个方法来完成这项工作， 例如

objectKeys(obj) {
    return Object.keys(obj);
}

<div *ngFor="let item of teams">
<p>{{item.name}}</p>
<p *ngFor="let key of objectKeys(item.members)">{{item.members[key].name}}</p>
</div>

或者你可以使用Object.values()的另一个选项，它将返回新数组中对象的值

objectValues(obj) {
   return Object.values(obj);
}
<div *ngFor="let item of teams">
    <p>{{item.name}}</p>
    <p *ngFor="let member of objectValues(item.members)">{{member.name}}</p>
</div>