CODEWITHSUNDEEP
angulartypescriptionic-frameworkionic4
user12075155
user12075155

Reputation:

Data that can be seen in the console is not displaying in the view

I am grabbing data from Firestore. In the console, the data is displaying like this. enter image description here

But when, I try to display the data in the view, I don't see any data. I just see empty cards.

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>

TS 

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

Favorite Service

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

Can someone please point out what I am doing wrong?

Upvotes: 1

Views: 50

Answers (1)

nircraft
nircraft

Reputation: 8468

In your response image is an Array. You can't see the images because "src" attribute on <img> is not getting proper src url to load.

You can use first url in image array as src for your image.

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

Upvotes: 2

Related Questions