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>

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

NgIf多个模板变量

1 个答案: