时间戳

首页 > 解决方案 > Angular：如何在具有常见 else 条件的 ngIf 中放置 2 个异步订阅

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

问题描述

我有一个用例，其中我有 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>

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

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

标签： javascriptangularrxjs

解决方案

问题

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

有很多方法可以合并 Observables（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>

推荐阅读