一旦所有http调用结束了角度，就计算总数

Question

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

这些调用中的每一个都分配给一个变量，并使用可以从UI中进行访问async pipe。

我当时正在考虑使用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之前，这是可行的，但是我在每次调用之后都调用了此函数，我希望在知道所有步骤完成后再调用它。我只是在尝试找出这种情况下最好的方法。

编辑：使用forkJoin @martin的建议后

totalEmitter$: Observable<number>;

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

在totalEmitter$现在有正确的值，但它目前正在为更多的HTTP调用amountOne$和amountTwo$。

Answer 1

forkJoin确实是这里的最佳选择。您只需将其与之链接map即可计算所需的一切。

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