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

我有一个简单的团队列表，首先我将每个团队放在一个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>

然后我尝试将响应设置为数组：（因为否则，

*ngFor

将显示错误）

这样做之后，在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>

但这将仅限于console.log:

team1、team2、team3

。所有其他数据都不存在

---

衷心感谢您的帮助！：）

您上一次的尝试非常接近，但在本例中，您实际上只返回了密钥（这是您观察到的行为）

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

试试这个：

this.team=this.teams.pipe（映射（res=>{
返回Object.keys（res.map）（x=>res[x]）；
}));

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

旁注：我已经切换到

Object.keys

，就像tslint喜欢为obj中的x设置未过滤的

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

当然，上面的代码并不保留密钥。如果您想这样做，您可以：

this.team=this.teams.pipe（映射（res=>{
返回Object.keys（res.map）（x=>{
常数输出=res[x]；
输出。_键=x；
返回输出；
});
}));

只需确保您使用的属性（在本例中为
\u key
）在您的对象上不存在，否则将被覆盖：）
非常感谢@谢谢你的时间和分享！这就是解决办法！它帮了很多忙，甚至超出了这个具体问题的范围。
this.team= this.teams.pipe(map((res: Response) => {return [res]}));

<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}}));