Estoy usando una interfaz Ionic/Angular aquí. Mis datos regresan de Firestore correctamente. También vuelve después de que se haya realizado un cambio en el documento de Firestore.

Sin embargo, los datos nunca se representan en el ion-content . Se registra en la consola correctamente. Esto me lleva a creer que estoy haciendo algo mal con Ionic/Angular.

El archivo de plantilla

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

el archivo de clase

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

También se incluyen los datos de la consola que obtengo de Firestore.

Y aquí hay una captura de pantalla de la pantalla actual.