我有一个简单的团队列表,首先我将每个团队都放在一个 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>
然后,我决定使用 map 类型(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
。所有其他数据都不存在。
衷心感谢您的帮助! :)
最佳答案
您的最后一次尝试非常接近,但在这种情况下您实际上只是返回了 key (这是您观察到的行为)。
因为 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
是什么,所以为了清楚起见我省略了类型——这段代码实际上并不依赖于类型。
当然,上面的代码并没有保留 key 。如果你想这样做,你可以:
this.team = this.teams.pipe(map(res => {
return Object.keys(res).map(x => {
const output = res[x];
output._key = x;
return output;
});
}));
只需确保您使用的属性(在本例中为 _key
)不会存在于您的对象上,否则它将被覆盖:)
关于angular - 如何格式化和显示从 AngularFire 返回的 Firestore 数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59000265/