I am using an Ionic/Angular frontend here. My data comes back from Firestore correctly. It also comes back after a change has been made to the firestore document.

However, the data never renders to the ion-content. It does log to the console correctly. This leads me to believe I am doing something wrong with Ionic/Angular.

The template file

<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>

The class file

    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);
    });
  }

Also including the console data that I am getting back from Firestore.

And here is a screenshot of the current screen