My issue revolves around retrieving data from Firestore. While the console displays the data correctly, my view ends up showing empty cards.
Consider the following HTML code:
<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>
Here's the TS code snippet:
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;
});
});
}
The Favorite Service function is defined as:
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();
}
}
}
I'm seeking guidance on where I'm going wrong in this process. Any insights would be greatly appreciated.