Question

我有一个具有以下结构的Cloud Firestore数据库：

服务
- [serviceId]
  - [userId]
    - documentId
      - service_img：“ test.png”
用户
- [uid]
  - 服务
    - [documentId]
      - 名称：“用户添加的服务名称”

实际的数据库中存在更多数据，以上仅说明了集合/文档/字段结构。

当我们使用ngFor执行特定服务时，我想获取所有“ service_img”（添加在“ userId”集合中）。目前，当我运行下面的代码时，我可以获取图像，但是循环继续工作，浏览器将崩溃。我的代码在下面。

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>

打字稿

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
}

Answer 1

将嵌套组件用于嵌套*ngFor

或者尝试使用recursive component

如何设置嵌套的ngFor

1 个答案: