从firestore onSnapshot返回后，数据未渲染

Question

我在这里使用离子/角前端。我的数据正确地来自Firestore。在对Firestore文件进行了更改后，它也会返回。

但是，数据永远不会呈现到ion-content。它确实正确地登录到控制台。这使我相信我在离子/角度做错了。

模板文件

<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返回的控制台数据。

这是当前屏幕的屏幕截图

Answer 1

好的，我看到，始终会出现错误的问题，我只需删除HTML标签（P，HR，DIV），然后使用离子自己的组件，例如离子贴，离子卡等。

在

。