angular - Găsirea dificultății de a afișa datele care sunt afișate în consolă pentru a fi afișate în vizualizare

Am o bază de date Firestore care arată astfel. În prezent, preiau date din colecția userFavorites.

Serviciul meu preferat

   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 preferat

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

Acum, când fac console.log acestui dat folosind -- console.log(snap.data().favourite),

Văd datele în consolă.

Totuși, aceste date nu se afișează în vizualizare cu următorul HTML pe care l-am încercat. De asemenea, am încercat să afișez datele folosind tubul 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>  

Ce fac greșit?

Răspuns #1

Ai creat un șir:

this.favoriteList = [];

atunci împingi un obiect:

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

Deci ai un array imbricat:

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

Deci codul ar trebui să arate astfel:

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

Răspunsul #2

Deoarece populați array-ul dvs. într-un mod asincron, prima dată când HTML-ul dvs. analizează array-ul, acesta este încă gol. Totuși, deoarece nu oferiți o referință nouă pentru acest array atunci când îl populați, Angular nu își reîmprospătează vizualizarea. Așadar, fie trebuie să rulați detectarea manuală a schimbărilor după ce știți că array-ul este complet, fie puteți face ceva de genul:

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

și apoi, în loc de console.log-ul tău, poți să faci:

this.favouriteListDisplay.next(this.favoriteList)

și apoi HTML-ul tău:

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

în acest fel vei spune Angular să declanșeze un alt ciclu de detectare a schimbărilor și afișare a datelor tale.