AngularFire - 如何在集合查询中显示 Firestore 键和值

Question

我正在使用标准的 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>

Answer 1

有一个管道叫做| keyvalue (angular 6+)。所以你可以做的是：

<ul>
    <li *ngFor="let user of users | async">
        <div *ngFor="let userinfo of user | keyvalue">
          {{ userinfo.key}}: {{userinfo.value}}
        </div>
    </li>
</ul>

AngularFire - 如何在集合查询中显示 Firestore 键和值

AngularFire - How to display Firestore key and value in collection query

angular

collections

google-cloud-firestore

angularfire5