angular - 使用异步管道在单个 ngIf 上组合两个或多个( bool )可观察量

Question

如果没有可观察对象，我可以在 HTML 模板中编写以下行:

<div *ngIf="(myVarA || myVarB) && myVarC !== x"></div>

如果所有 myVar 变量现在实际上都是可观察的，我该如何翻译这一行？

<div *ngIf="((myVarA | async) || (myVarB | async)) && (myVarC | async) !== x">

不起作用。

在另一个问题(Putting two async subscriptions in one Angular *ngIf statement)中，可以像这样实现将两个或多个可观察值组合成一个 ngIf 的可能性

<div *ngIf="{ a: myVarA | async, b: myVarB | async } as result"></div>

但是，我看不到在随后用于评估 ngIf 的表达式上使用任何 bool 运算符(或与此相关的任何运算符)的可能性。

我该如何解决这个问题？请注意，我所有的 Observables 在下面都使用了一个 BehaviorSubject。我认为基本上我想要的是在模板中使用 combineLatest 运算符。

奖励:如果整个表达式的计算结果为真以供以后在模板中使用(如 myVarA | async as varA)，是否有任何方法可以提取 myVarA 的单个值？

Answer 1

使用 combineLatest 怎么样？

例如:

import { combineLatest } from 'rxjs/observable/combineLatest';
import { Observable } from 'rxjs/Observable';    

@Component({...})
export class FooComponent {
  obs1$: Observable<bolean>;
  obs2$: Observable<bolean>;
  obs3$: Observable<bolean>;

  constructor(){
    // set observables
  }

  get combined$(){
    return combineLatest(
      this.obs1$,
      this.obs2$
      this.obs3$,
      (one,two,three)=>(one || two) && three);
  }
}

// template
<div *ngIf="combined$ | async">

检查以下 fiddle 以获得指导:

https://jsfiddle.net/uehasmb6/11/

有关 combineLatest 运算符的更多信息 here

更新:但是如果您仍想将所有逻辑保留在模板中，您可以尝试类似的方法:

<div *ngIf="((myVarA | async) || (myVarB | async)) && ((myVarC | async) !== x)">

但我建议您不要这样做。保持 HTML 模板尽可能干净是一个 good practice .