Angular 9 强制异步 pipe 嵌套在 ngIf 异步 pipe

Question

<ng-container *ngIf="condition$ | async">
    {{ value$ | async }}
</ng-container>

当条件 $ 在 false 之后发出 true 时，如何强制视图显示最新值？

---

更新

condition$ 和 value$ 都派生自同一个 formGroup.valueChanges，不能是 BehaviorSubject 的实例。

Answer 1

将这两者结合起来并拥有一个像这样的可观察和订阅怎么样。 .ts

this.viewObservable$ = combineLatest(
      this.condition$,
      this.value$
    ).pipe(
      map(([condition, value]) => {
        return {
          condition,
          value
        }
      })
    )

在 your.html 中，您可以执行此操作

<ng-container *ngIf="(viewObservable$ | async) as data && data.condition">
  {{ data.value }}
</ng-container>

这有帮助吗？

Answer 2

你可以通过在你的value$ observable 上添加一个shareReplay来做到这一点：

<ng-container *ngIf="condition$ | async">
    {{ value$ | async }}
</ng-container>

value$ = obs$.pipe(
  shareReplay(1)
);

或者通过使用BehaviorSubject或ReplaySubject

Answer 3

您可以执行以下操作以防止内部减法取消订阅

<ng-container *ngIf="{val: value$ | async} as source">
  <div *ngIf="condition$ | async">
   {{ source.val }}
  </div>
</ng-container>

例子