发现很难将控制台上显示的数据显示在视图中答案

【问题标题】：Finding it difficult to display data that is displayed on the console to display in the view发现很难将控制台上显示的数据显示在视图中
【发布时间】：2020-03-10 12:14:37
【问题描述】：

我有一个看起来像这样的 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) 控制台记录这些数据时，

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

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

我做错了什么？

【问题讨论】：

控制台有错误吗？
糟糕的问题命名:)
favoriteList 可能为空
你可以尝试用JSON.stringify()显示它

标签： angular typescript google-cloud-firestore ionic4

【解决方案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>

【讨论】：

【解决方案2】：

您似乎正在循环使用favoriteList 和<ion-card *ngFor ="let favorite of favoriteList">。 favoriteList的结构是一个对象数组，每个对象都有id和favoriteList数组。

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

在您的模板中，您尝试访问favoriteList 上不存在的属性。

【讨论】：

【解决方案3】：

由于您以异步方式填充数组，因此您的 html 第一次解析数组时它仍然是空的。但是，由于您在填充该数组时没有为它提供新的引用，因此 Angular 不会刷新它的视图。因此，您要么需要在知道数组已满后运行手动更改检测，要么可以执行以下操作：

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

然后你可以代替你的console.log：

this.favouriteListDisplay.next(this.favoriteList)

然后是你的 html:

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

这样你会告诉 Angular 触发另一个检测变化和显示数据的循环。

【讨论】：