Как установить вложенный ngFor

Question

У меня есть база данных Cloud Firestore со следующей структурой:

• обслуживание

  • [ServiceID]

    • [идентификатор пользователя]

      • documentId

        • service_img: "test.png"

• Пользователи

  • [UID]

    • Услуга

      • [documentId]

        • name: "имя добавленной пользователем службы"

В фактической БД присутствует больше данных, приведенное выше иллюстрирует структуру коллекции / документа / поля.

Я хочу получить все «service_img» (которые добавлены в коллекцию «userId»), пока мы выполняем конкретный сервис с использованием ngFor. В настоящее время, когда я запускаю код ниже, я могу получить изображения, но цикл продолжает работать, и мой браузер падает. мой код ниже.

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

Или попробуйте использовать рекурсивный компонент