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>