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仅支持绑定到数组等Iterable。

仅团队-名称：字符串-成员属于团队。

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>