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

109

安古兰迪2

我从我的数据库中获取此数组：

通过此功能：

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：

找不到类型为“对象”的其他支持对象“ [对象对象]”。NgFor仅支持绑定到数组等Iterable。

仅限团队-名称：字符串-成员位于团队中。

export Interface Teams {
name: string;
}

export Interface Members {
name: string;
}

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

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

阿约姆·阿米尔扬（Artyom Amiryan）

您会收到错误消息，因为您的membersis对象和对象不可迭代，并且*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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。