如何格式化和显示从 AngularFire 返回的 Firestore 数据？

Posted 2023-03-13

【中文标题】如何格式化和显示从 AngularFire 返回的 Firestore 数据？

【英文标题】：How can I format and display Firestore data returned from AngularFire?

【发布时间】：2020-03-18 21:09:19

【问题描述】：

我有一个简单的团队列表，首先我将每个团队放在一个 firebase 文档中，当查询集合时，可以直接使用*ngFor 在 html 中显示它们。很简单的例子：

<ion-card *ngFor="let t of (team|async)" >
  <ion-card-header>
    <ion-card-title>name: t.name </ion-card-title>
      t.pic
      score = t.score
  </ion-card-header>
</ion-card>

然后，我决定使用地图类型（json 对象）测试将所有团队放入一个 Firebase 文档中。但现在*ngFor 将不起作用。 （我明白了原因的本质，但无法解决）：

这是数据库文档：

说这是新的查询：

this.teams= this._db.collection('teams').doc("allteams").valueChanges();

然后我尝试将响应设为数组：（否则 *ngFor 会显示错误）

this.team= this.teams.pipe(map((res: Response) => return [res]));

这样做之后，在 HTML 中我只能访问一个值，例如：

<ion-card *ngFor="let t of (team|async)" >
  <ion-card-header>
    <ion-card-title>name: t.team1.name </ion-card-title>
  </ion-card-header>
</ion-card>

但我真的不能像以前那样表现出来：

<ion-card *ngFor="let t of (team|async)" >
  <ion-card-header>
    <ion-card-title>name: t.name </ion-card-title>
      t.pic
      score = t.score
  </ion-card-header>
</ion-card>

我知道响应只是一个数组，但无法将其转换为有效的东西。

我也尝试过类似的方法：

this.team= this.teams.pipe(map((res: Response)=> for(let r in res)return r));

但这只会console.log：team1, team2, team3。其他所有数据都不存在。

衷心感谢您的帮助！ :)

【参考方案1】：

您的最后一次尝试非常接近，但在这种情况下您实际上只是返回了密钥（这是您观察到的行为）。

由于 AngularFire 仅在您对文档调用 valueChanges 时返回原始文档值，因此您可以像直接操作对象一样操作它。由于您想返回给定键的值，因此只需将其从对象中拉出即可。

试试这个：

this.team = this.teams.pipe(map(res => 
  return Object.keys(res).map(x => res[x]);
));

此代码映射对象上的所有键，并返回一个包含这些键的所有值的数组。 Angular / Ionic 模板应该能够以您期望的方式处理这个问题。

旁注：我已切换到 Object.keys，因为 tslint 喜欢 throw an error 以获得未过滤的 for x in obj。

我也不太确定这里的 Response 是什么，所以为了清楚起见，我省略了类型——这段代码实际上并不依赖于类型。

当然，上面的代码没有保留密钥。如果你想这样做，你可以：

this.team = this.teams.pipe(map(res => 
  return Object.keys(res).map(x => 
    const output = res[x];
    output._key = x;
    return output;
  );
));

只需确保您使用的属性（在本例中为 _key）在您的对象上不存在，否则它将被覆盖 :)

【讨论】：

非常感谢！ @robsiemb 感谢您的时间和分享！这就是解决方案！它帮助很大，甚至超出了这个特定问题的范围。