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设置为Observable，然后在子组件中对其进行订阅，但是每次发生更改时，我都会调用 limitCategories() 。我只想在对服务的最后一次调用后才调用它一次。

Answer 1

您可以使用@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();

}

Answer 2

使用forkJoin运算符：

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

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

完成所有HTTP调用后，forkJoin将调用子方法。

我并不是说您的实现是最好的解决方案，但这应该可以为您解决问题。

父级在forEach中完成可观察项后，角度触发子级函数

2 个答案: