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的管道| 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>