[英]AngularFire - How to display Firestore key and value in collection query
I'm using a standard AngularFire collection query. 我正在使用标准的AngularFire集合查询。 However a project requirement has dictated that instead of explicit binding firestore nodes and values directly in the HTML (as seen in the first HTML snippet below), that we instead bind the returned key and value so that if any new fields are added in Firestore, I won't need to update my project to display those items. 但是,根据项目要求,我们不是直接在HTML中显式绑定Firestore节点和值(如下面的第一个HTML代码段所示),而是绑定返回的键和值,以便在Firestore中添加任何新字段时,我不需要更新项目即可显示这些项目。
Is there a way, with the standard AngularFire query to bind the key and value of each returned result in the HTML? 有没有办法使用标准AngularFire查询将HTML中每个返回结果的键和值绑定在一起?
user.component.ts 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 HTML
<ul>
<li *ngFor="let user of users | async">
<div>{{ user.name }}</div>
<div>{{ user.dob }}</div>
<div>{{ user.id }}</div>
</li>
</ul>
Desired Result 所需结果
<ul>
<li *ngFor="">
<div>{{key}} / {{ value }}</div>
</li>
</ul>
There is a pipe called | keyvalue
有一个叫| keyvalue
的管道| keyvalue
| keyvalue
(angular 6+). | keyvalue
(角度为6+)。 So what you can do is: 因此,您可以做的是:
<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.