![](/img/trans.png)
[英]AngularFire - Push data from firestore collection query into an array
[英]AngularFire - How to display Firestore key and value in collection query
我正在使用标准的AngularFire集合查询。 但是,根据项目要求,我们不是直接在HTML中显式绑定Firestore节点和值(如下面的第一个HTML代码段所示),而是绑定返回的键和值,以便在Firestore中添加任何新字段时,我不需要更新项目即可显示这些项目。
有没有办法使用标准AngularFire查询将HTML中每个返回结果的键和值绑定在一起?
user.component.ts
getUsers(){
this.usersCollection = this.afs.collection<User>('users');
this.users = this.usersCollection.snapshotChanges().pipe(
map(actions => actions.map(a => {
const data = a.payload.doc.data() as User;
const id = a.payload.doc.id;
return { id, ...data };
}))
);
}
HTML
<ul>
<li *ngFor="let user of users | async">
<div>{{ user.name }}</div>
<div>{{ user.dob }}</div>
<div>{{ user.id }}</div>
</li>
</ul>
所需结果
<ul>
<li *ngFor="">
<div>{{key}} / {{ value }}</div>
</li>
</ul>
有一个叫| keyvalue
的管道| keyvalue
| keyvalue
(角度为6+)。 因此,您可以做的是:
<ul>
<li *ngFor="let user of users | async">
<div *ngFor="let userinfo of user | keyvalue">
{{ userinfo.key}}: {{userinfo.value}}
</div>
</li>
</ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.