angular - 一旦所有 http 调用以 Angular 完成，计算总数

Question

我们有一个“仪表板”，我们可以在其中发出多个 http 请求，每个请求都会返回仪表板一部分的数据。我现在需要的是计算每个调用部分的总和。

这些调用中的每一个都分配给一个变量，并使用 异步管道 从 UI 访问。

我正在考虑使用 forkJoin合并所有调用，然后调用 complete 函数上的方法来计算总数。

例如:

amountOne$: Observable<IAmounts>; 
amountTwo$: Observable<IAmounts>; 


this.amountOne$ = httpCall();
this.amountTwo$ = httpCall();

<ng-container *ngIf='amountOne$ | async as amountOne;'>...</ng-container>
<ng-container *ngIf='amountTwo$ | async as amountTwo;'>...</ng-container>

我目前拥有的是这个...

 totalEmitter$ = new BehaviorSubject<number>(0);

然后每次调用都会调用此函数:

  private calcTotal() {

     let calc = 0;
     if (this.amountOne$) {
       calc += this.amountOne$.total;
     }

     if (this.amountTwo$) {
       calc += this.amountTwo$.total;
     }

     this.totalEmitter$.next(calc);
  }

<h2>Total: {{totalEmitter$| async | number : '1.2-2'}}</h2>

这在我开始使用 observables 之前是有效的，但我在每次调用后调用这个函数，我更愿意在我知道所有都完成后调用它。我只是想找出适合这种情况的最佳方法。

编辑:根据@martin的建议使用forkJoin之后

totalEmitter$: Observable<number>;

totalEmitter$ = forkJoin([
  amountOne$,
  amountTwo$,
]).pipe(
  map(([result1, result2]) => /* do calcualtions */)
);

totalEmitter$ 现在具有正确的值，但它现在正在对 amountOne$ 和 amountTwo$ 进行额外的 http 调用。

Answer 1

forkJoin 确实是这里最好的选择。您只需将它与 map 链接起来即可计算您需要的任何内容。

$totalEmitter$ = forkJoin([
  amountOne$,
  amountTwo$,
]).pipe(
  map(([result1, result2]) => /* do calcualtions */)
);