如何设置嵌套的ngFor

Question

我有一个具有以下结构的Cloud Firestore DB：

• 服务 [服务Id] [用户身份] documentId service_img：“test.png”
• 用户 [UID] 服务 [documentId] name：“用户添加的服务名称”

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

我想在使用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