NgIf多个模板变量[重复]

Question

我发现了

<div
  *ngIf="asyncCond$ | async as c1 && cond2"
></div>

行不通。 有没有办法在一个指令中定义具有多个别名的多个条件？

比如asyncCond1$ | async as c1 && asyncCond2$ | async as c2 等等。添加() 似乎没有任何影响。

Answer 1

您只能使用结构指令声明一个 as 别名，但这是我所做的。

您可以使用combineLatest() 将多个可观察对象组合在一起并创建在模板中使用的状态对象。您创建一个对象，其中属性是多个可观察值的快照。

   this.state$ = combineLatest(asyncCond1$, asyncCond2$, asyncCond3$).pipe(
      map(([asyncCond1, asyncCond2, asyncCond3]) => ({asyncCond1, asyncCond2, asyncCond3}))
   );

现在您可以在模板中使用这样的状态对象了。

<ng-container *ngIf="state$ | async as state">
    <div *ngIf="state.asyncCond1 && state.asyncCond2"></div>
    <div *ngIf="state.asyncCond3"></div>
    <div>
       {{state.asyncCond1 ? "Yes" : "No"}}
    </div>
</ng-container>

对于使用多个可观察对象的更复杂的模板，它使事情变得更容易使用。