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的管道（角度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键和值

1 个答案: