我在这里使用了一个离子/Angular 前端。我的数据从Firestore正确地返回。它也在对Firestore文档进行更改后返回。
然而，数据从来没有渲染到ion-content。它确实正确地记录到控制台。这让我相信我在离子/Angular 方面做错了什么。
模板文件

<ion-content [fullscreen]="true" style="text-align: center;" *ngIf="!this.isLoading">
    <ion-item *ngFor="let team of currentTeams; let index" [color]="team.color" style="margin: 10px;">
      <p>{{index}}</p>
      <h1 slot="start" style="height: 3.5rem;">{{ team.name }}</h1>
      <br />
      <div id="controls" slot="end">
        <ion-icon style="margin: 0 20px" name="remove-circle" (click)="decrementTeamScore(team)"></ion-icon>
        <span>{{ team.score }}</span>
        <ion-icon style="margin: 0 20px" name="add-circle" (click)="incrementTeamScore(team)"></ion-icon>
      </div>
    </ion-item>
</ion-content>

类文件

this.isLoading = true;
    this.gameId = this.route.snapshot.params.id;
    if(this.gameId) {
      const result = await this.getGame();
      if(result) {
        await this.getTeams();
      }
    }
    this.isLoading = false;
  }
  public async getTeams() {
    const teamRef = this.teamsCollection.ref;
    const teamsByGameIdQuery = teamRef.where('gameId', '==', this.currentGame.docID).orderBy('score', 'desc');
    onSnapshot(teamsByGameIdQuery, (snapshot) => {
      const teams: ITeam[] = [];
      snapshot.docs.forEach((doc) => {
        teams.push({ ...doc.data(), id: doc.id});
        this.currentTeams = teams;
      });
      console.log(this.currentTeams);
    });
  }

还包括我从Firestore取回的控制台数据。x1c 0d1x
这是当前屏幕

的屏幕截图