I am managing a Cloud Firestore database with a unique structure:
service
[serviceId]
[userId]
documentId
- service_img : "test.png"
users
[uid]
services
[documentId]
- name: "user added service name"
The above showcases the basic collection/document/field setup within my DB.
My goal is to retrieve all "service_img" (added in the "userId" collection) when executing a particular service using ngFor. However, my current code causes a browser crash due to continuous looping. Here is the code snippet I am working on:
html
<div *ngFor="let x of userservicelist">
<div class="makup_nm">{{x.name}}</div>
<div class="imageDiv">
<img src="assets/imgs/add.png" (click)="addserviceImg(x.id)" />
<img src="{{y.service_img}}" *ngFor="let y of getSerImgs(x.id)" />
</div>
</div>
typescript
getuserServices(){
this.userservicelist=[]
let db = firebase.firestore()
db.collection(`users/${this.userId}/services`).get().then((res)=>
res.forEach((service) => {
let temp;
temp = service.data();
temp.id = service.id;
this.userservicelist.push(temp);
console.log(this.userservicelist)
})
)
console.log(this.userservicelist)
}
getSerImgs(serviceId){
this.serviceimage=[]
let db = firebase.firestore();
db.collection(`service/${serviceId}/${this.userId}`).get().then((res)=>{
res.forEach(service => {
let temp = service.data();
console.log(temp)
temp.id = service.id;
this.serviceimage.push(temp);
});
})
return this.serviceimage
}