angular - Me resulta difícil mostrar en la vista los datos que se muestran en la consola

Tengo una base de datos Firestore que se ve así. Actualmente estoy recuperando datos de la colección userFavorites.

Mi servicio favorito

   async getfavoriteList(): Promise<firebase.firestore.QuerySnapshot> {
    const user: firebase.User = await this.authService.getUser();
    if (user) 
          {
    this.FavoriteListRef = firebase
      .firestore()
      .collection(`userFavorites`);
    return this.FavoriteListRef.where('uid', '==', user.uid).get();
              }
           } 
       }

TS favorito

  favoriteList: any; 
  public favoriteListRef: firebase.firestore.CollectionReference;


    this.favoriteService.getfavoriteList().then(favoriteListSnapshot => {
      this.favoriteList = [];
      favoriteListSnapshot.forEach(snap => {
        this.favoriteList.push({
          id: snap.id,
          favoriteList: snap.data().favourite
        });
        console.log(snap.data().favourite)
        return false;
      });
    });
  }

Ahora, cuando hago console.log de estos datos usando -- console.log(snap.data().favourite),

Veo los datos en la consola.

Sin embargo, estos datos no se muestran en la vista con el siguiente HTML que he intentado. También he intentado volcar los datos con el pipe JSON.

<ion-grid>
        <ion-row>
        <ion-col size="12" >
        <ion-card *ngFor ="let favorite of favoriteList">
           <!--  <img [src]="favorite?.image[0]">
            <img [src]="favorite?.favorite.image[0]"> -->
          <div class="card-title">{{ favorite | json }}</div>
        <div>{{favorite?.description}}</div>
        </ion-card>
        </ion-col>
      </ion-row>
      </ion-grid>  

¿Qué estoy haciendo mal?

Respuesta #1

Has creado un arreglo:

this.favoriteList = [];

entonces estás empujando un objeto:

 this.favoriteList.push({
      id: snap.id,
      favoriteList: snap.data().favourite
    });

Entonces tienes un arreglo anidado:

 favoriteList[i].favoriteList // you should iterate here

Entonces el código debería verse así:

    <ion-card *ngFor ="let favorite of favoriteList">   
        <ng-container *ngFor="let item of favorite?.favoriteList">
            <img [src]="item.image[0]">
            <div class="card-title">{{ item | json }}</div>
            <div>{{item?.description}}</div>
        </ng-container>
    </ion-card>

Respuesta #2

Dado que estás llenando tu arreglo de manera asincrónica, la primera vez que tu HTML analiza el arreglo, este todavía está vacío. Sin embargo, dado que no estás proporcionando una nueva referencia para este arreglo cuando lo llenas, Angular no actualiza su vista. Por lo tanto, necesitarás ejecutar la detección de cambios manualmente después de que sepas que el arreglo está lleno o puedes hacer algo como:

private favoriteListDisplay = new BehaviourSubject<any[]>([]);

y luego en lugar de tu console.log puedes hacer:

this.favouriteListDisplay.next(this.favoriteList)

y luego tu html:

 <ion-card *ngFor ="let favorite of favoriteListDisplay | async">

De esta manera le indicarás a Angular que inicie otro ciclo de detección de cambios y muestre tus datos.