如何格式化和顯示從 AngularFire 返回的 Firestore 數據？

Question

我有一個簡單的團隊列表，首先我將每個團隊放在一個 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數組：（因為否則*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 。 所有其他數據都不存在。

衷心感謝您的幫助！ :)

Answer 1

您的最后一次嘗試非常接近，但在這種情況下您實際上只返回了密鑰（這是您觀察到的行為）。

由於當您對文檔調用valueChanges時，AngularFire 僅返回原始文檔值，因此您可以像直接操作對象一樣操作它。 由於您想返回給定鍵的值，因此您只需要將其從對象中拉出。

嘗試這個：

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

此代碼映射對象上的所有鍵，並返回這些鍵的所有值的數組。 Angular / Ionic 模板應該能夠以您期望的方式處理這個問題。

旁注：我已經切換到Object.keys因為 tslint 喜歡為for x in obj未過濾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 ），否則它將被覆蓋:)