angular - 发现在控制台上显示的数据很难显示在 View 中

Question

我有一个如下所示的 Firestore 数据库。
我目前正在从 userFavorites 集合中检索数据。


我最喜欢的服务

   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

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

现在，当我使用 -- console.log(snap.data().favourite) console.log 这个数据时，

我在控制台中看到了数据。



但是，此数据未显示在我尝试过的以下 HTML 的 View 中。
我也试过用 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>  

我究竟做错了什么？

Answer 1

您已经创建了一个数组:

this.favoriteList = [];

那么你正在推送一个项目:

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

所以你有嵌套数组:

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

所以代码应该是这样的:

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