尝试使用键值（Angular）从云 Firestore 获取值答案

【问题标题】：Trying to get values from cloud Firestore using keyvalue (Angular)尝试使用键值（Angular）从云 Firestore 获取值
【发布时间】：2021-02-15 21:05:28
【问题描述】：

我的 firebase 数据库有一个名为 users 的集合。我可以使用以下代码访问它：

为我服务：

  users$ = this.afs.collection<Users[]>('users').valueChanges();

在我的组件中：

public users = this.firestoreService.users$.pipe(tap(console.log));

当我这样做的时候

{{用户 |异步 | json}}

，我得到对象没问题。我在使用键值管道迭代它们时遇到了麻烦。这是我的代码：

<pre>{{users | async | json}}</pre>
<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody *ngIf="users">
  <tr *ngFor="let user of users | async | keyvalue">
     <td>{{user.value.displayName}} </td>
  </tr>
  </tbody>
</table>

如果我执行 user.key，我会得到数组中的密钥。无法到达“内部”键或值。这是我的用户类：


export interface Users {
  displayName: string;
  email: string;
  phoneNumber: null;
  role: string;

}

这是我的数据库结构的图片：

【问题讨论】：

标签： javascript angular firebase google-cloud-firestore

【解决方案1】：

您在 users$ 中返回 Observable<Users[]>。因此，当使用通过异步管道插值的用户时，您已经获得了一个数组 Users[]，它是一个可迭代的。

因此将您的 HTML 更改为：

<tr *ngFor="let user of users | async">
   <td>{{user.displayName}} </td>
</tr>

【讨论】：