可以在控制台中看到的数据未显示在视图中答案

【问题标题】：Data that can be seen in the console is not displaying in the view可以在控制台中看到的数据未显示在视图中
【发布时间】：2019-11-13 19:50:59
【问题描述】：

我正在从 Firestore 获取数据。在控制台中，数据是这样显示的。

但是，当我尝试在视图中显示数据时，我看不到任何数据。我只看到空卡。

HTML

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

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

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

最喜欢的服务

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

有人可以指出我做错了什么吗？

【问题讨论】：

您在使用OnPush 策略吗？
Image 似乎是一个数组，并且标题在您的响应中为空。所以空卡似乎在意料之中？
我认为 nircraft 的想法是正确的。对于未来，您可以使用json pipe 转储favourite，通过输入{{ favorite | json }}。这可以让您确定数据确实存在。在您的情况下，您应该只扩展 image 并查看其中包含哪些属性。

标签： angular typescript ionic-framework ionic4

【解决方案1】：

在您的回复图片中是Array。您看不到图像，因为 <img> 上的 "src" 属性没有加载正确的 src url。

您可以将图像数组中的第一个 url 用作您的图像的src。

<img [src]="favorite?.image[0]">

【讨论】：