Угловая триггерная дочерняя функция, как только родитель заканчивает с наблюдаемыми в forEach

Question

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

parent.component.ts

let categoriesArr = [];

for (let category of listing.categories) {
      this._projectService.getCategories().subscribe((data) => {
             this.categoriesArr.push(data);
       });
}

parent.component.html

<child-comp #childComp [categories]="categoriesArr"></child-comp>

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

child.component.ts

@Input() public categories;

public limitCategories() {
**//I want to call this function from parent once the for loop with observables is finished**
...
}

child.component.html

<div class="Category" *ngFor="let item of categories">
...
</div>

Я пробовалсделать categoryArr в качестве наблюдаемого, а затем подписаться на него в дочернем компоненте, но тогда я буду вызывать limitCategories() каждый раз, когда происходит изменение.Я хочу позвонить только один раз после последнего звонка в сервис.

Answer 1

Используйте оператор forkJoin:

const calls$ = listing
  .categories
  .map(category => this._projectService.getCategories(category))

forkJoin(calls$).subscribe(data => {
  this.categoriesArr = [...data];
  this.childComp.limitCategories();
})

После выполнения всех ваших HTTP-вызовов forkJoin вызовет дочерний метод.

Я не говорю, что ваша реализация - лучшее решение, но это должно помочь вам.

Answer 2

Вы можете использовать @ViewChild декоратор для получения дочерней ссылки как ChildComponent:

parent.component.ts

@ViewChild('childComp', {read: ChildComponent})
childComp: ChildComponent;

Затем в цикле,Вы можете вызвать limitCategories() метод:

for (let category of listing.categories) {
  this._projectService.getCategories().subscribe((data) => {
         this.categoriesArr.push(data);

         this.childComp.limitCategories();

   });
}

ОБНОВЛЕНИЕ

Если вы хотите подождать цикл асинхронных операций и вызвать limitCategories() после последней асинхронной синхронизацииоперации, вы можете использовать async/await для ожидания завершения операций.

parent.component.ts

ngOnInit(){
  this.getCategories();
}


getCategories = async () => {
    for (let category of listing.categories) {
       await this._projectService.getCategories().toPromise().then((data) => 
       {
           this.categoriesArr.push(data);
       });
    }

    this.childComp.limitCategories();

}