Angular 9: forkJoin 订阅无效

Question

Angular 9: forkJoin 订阅无效

4

我正在尝试使用可观察对象(rxjs 6.5.1)在Angular 9的顶级组件上加载页面数据。当我单独订阅每个服务时，可以看到数据正常返回：

ngOnInit(): void {
  const technicianSubscription = this.techniciansClientService.getByTechnicianId(this.technicianId).subscribe(technician => console.log(technician));
  const technicianReviewsSubscription = this.technicianReviewsClientService.getByTechnicianId(this.technicianId).subscribe(technicianReviews => console.log(technicianReviews));
}

当我尝试使用forkJoin时，subscribe方法中的数据从未被返回：

ngOnInit(): void {
  this.pageDataSubscription = forkJoin({
    technician: this.techniciansClientService.getByTechnicianId(this.technicianId),
    technicianReviews: this.technicianReviewsClientService.getByTechnicianId(this.technicianId),
  }).subscribe(
    // data is never logged here
    data => console.log(data)
  );
}

我已经尝试使用forkJoin传递服务调用的数组，也尝试使用zip，但都没有成功。这里发生了什么？

- EJ Morgan

奇怪..看起来它应该能正常工作 - Acebee

两个 getByTechnicianId 的调用都正常吗？请检查网络控制台。 - Pankaj Parkar

2

当其中一个或两个流发出事件但不完成时，您所描述的行为可以实现。forkJoin只在所有源都完成时才会发出事件。您能检查一下那个版本吗？ - Andrei

@Andrei 我想这就是发生的事情。我尝试在forkJoin中放置不同的服务，它是成功的。因此，似乎技术人员服务调用没有完成。您是否建议像下面的答案那样使用combineLatest来解决我的问题？ - EJ Morgan

1

这取决于您要处理的情况。您能提供技术服务返回的可观察对象吗？如果太复杂，我认为 ..getById(...).pipe(take(1)) 只从此可观察对象中获取一个事件将为您处理此问题。 - Andrei

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Owen Kelvin · Accepted Answer

我建议使用rxjs中的combineLatest。它更容易使用。

import {combineLatest} from `rxjs`;

componentIsActive = true;
ngOnInit(): void {
  combineLatest([
    this.techniciansClientService.getByTechnicianId(this.technicianId),
    this.technicianReviewsClientService.getByTechnicianId(this.technicianId),
  ]).pipe(
    map(([technician, technicianReviews]) => ({technician, technicianReviews})),
    takeWhile(() => this.componentIsActive)
  ).subscribe(data => console.log(data));
}