Angular：如何在具有常见 else 条件的 ngIf 中放入 2 个异步订阅

Question

我有一个用例，其中我有 2 个具有常见 else 条件的异步订阅。

<ng-container *ngIf="{ data1: data1$ | async, data2: data2$ | async } as history; else loader">
<h2>Inside ngIf condition</h2>
</ng-container>
<ng-template #loader>Loader here....</ng-template>

这里发生的是异步订阅中的内容甚至在订阅之前就显示出来了。 我知道这是因为多个订阅的 object 字面定义。

有没有办法来解决这个问题？

Answer 1

问题

像你写的东西很模棱两可。
我不确定您要达到什么语义。

合并 Observable 的方法有很多（merge、withLatestFrom、forkJoin、zip 等）。
您可能必须自己选择并实施一个。 请务必阅读文档。

例子：

例如， forkJoin [doc]在其源 Observables 全部完成之前不会发出。

在您的组件中：

joinedData$ = forkJoin({
  data1: this.data1$,
  data2: this.data2$
});

标记

<ng-container *ngIf="(joinedData$ | async) as history; else loader">
<h2>Inside ngIf condition</h2>
</ng-container>
<ng-template #loader>Loader here....</ng-template>