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

Question

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

How can I force the view to display latest value when condition$ emits true after false?

---

Update

condition$ and value$ are both derived from the same formGroup.valueChanges and cannot be instances of BehaviorSubject.

Answer 1

What about combining those two and having one observable and subscription like this. .ts

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

and in your.html you can do this

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

Does this help?

Answer 2

You can do that by adding a shareReplay on your value$ observable:

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

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

Or by using a BehaviorSubject or ReplaySubject

Answer 3

you can do as follow to prevent inner subtraction form unsubscribing

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

example