[英]How can I format and display Firestore data returned from AngularFire?
I have a simple list of teams, first I had each team in one firebase document, and when querying the collection it was straightforward to display them in HTML with *ngFor
.我有一个简单的团队列表,首先我将每个团队放在一个 firebase 文档中,当查询集合时,使用
*ngFor
直接在 HTML 中显示它们。 Very simple example:非常简单的例子:
<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>
Then, I decided to test putting all the teams in just one Firebase document using the map type (json object).然后,我决定使用地图类型(json 对象)测试将所有团队放在一个 Firebase 文档中。 But now the
*ngFor
won't work.但是现在
*ngFor
将不起作用。 (I get the essence of why, but can't solve it): (我明白了为什么的本质,但无法解决它):
This is the DB doc:这是数据库文档:
Say this is the new query:假设这是新查询:
this.teams= this._db.collection('teams').doc("allteams").valueChanges();
Then I tried making the response an array: (because otherwise *ngFor
would show errors)然后我尝试将响应
*ngFor
数组:(因为否则*ngFor
会显示错误)
this.team= this.teams.pipe(map((res: Response) => {return [res]}));
and after doing so, in HTML I can only access one single value as of example:这样做之后,在 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>
but I really cannot get to show as did before:但我真的无法像以前那样展示:
<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>
I understand that the response is only one array, but can't transform it into something that works.我知道响应只是一个数组,但无法将其转换为有效的东西。
I've also tried something like:我也试过类似的东西:
this.team= this.teams.pipe(map((res: Response)=> {for(let r in res){return r}}));
but this will only console.log: team1, team2, team3
.但这只会 console.log:
team1, team2, team3
。 All the other data is not there.所有其他数据都不存在。
Thanks sincerely for the help!衷心感谢您的帮助! :)
:)
Your last attempt was pretty close, but you're effectively only returning the key in this case (which is the behavior you observe).您的最后一次尝试非常接近,但在这种情况下您实际上只返回了密钥(这是您观察到的行为)。
Since AngularFire just returns the raw document value when you call valueChanges
on a document, you can manipulate it like you would the object directly.由于当您对文档调用
valueChanges
时,AngularFire 仅返回原始文档值,因此您可以像直接操作对象一样操作它。 Since you want to return the value for a given key, so you just need to pull it off the object.由于您想返回给定键的值,因此您只需要将其从对象中拉出。
Try this:尝试这个:
this.team = this.teams.pipe(map(res => {
return Object.keys(res).map(x => res[x]);
}));
This code maps across all the keys on the object, and returns an array of all of the values of those keys.此代码映射对象上的所有键,并返回这些键的所有值的数组。 The Angular / Ionic template should be able to deal with this in the way you are expecting.
Angular / Ionic 模板应该能够以您期望的方式处理这个问题。
Side note: I've switched to Object.keys
as tslint likes to throw an error for an unfiltered for x in obj
.旁注:我已经切换到
Object.keys
因为 tslint 喜欢为for x in obj
未过滤for x in obj
抛出错误。
I'm also not quite sure what a Response
is here so I've omitted the type for clarity -- this code isn't really type dependent.我也不太确定这里的
Response
是什么,所以为了清楚起见,我省略了类型——这段代码并不是真正的类型相关。
The above code doesn't preserve the key, of course.当然,上面的代码不保留密钥。 If you want to do that, you can:
如果你想这样做,你可以:
this.team = this.teams.pipe(map(res => {
return Object.keys(res).map(x => {
const output = res[x];
output._key = x;
return output;
});
}));
Just make sure that you use a property (in this case _key
) that won't exist on your objects, or it will be overwritten :)只需确保您使用对象上不存在的属性(在本例中为
_key
),否则它将被覆盖:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.