Angular：使用带有多个模板变量的异步管道的 NgIf 的正确语法？

Question

使用 Angular，我们可以订阅 Observable 并将异步管道的结果分配给另一个变量：

    *ngIf="(data$ | async) as data; else loading"

我们可以检查多个条件：

    *ngIf="(data1$ | async) && (data2$ | async); else loading"

但是使用 Angular “as”关键字验证多个条件的正确语法是什么？

我试过了：

    *ngIf="((data1$ | async) as data1) && ((data2$ | async) as data2); else loading"

但我有一个问题：

Parser Error: Unexpected token &&, expected identifier, keyword, or string

Answer 1

您可以使用 object-like 语法。

<ng-container *ngIf="{
  data1: data1$ | async,
  data2: data2$ | async
} as data">
  <div *ngIf="data.data1 && data.data2; else loading"> 
    <span>{{ data.data1 }}</span>
    <span>{{ data.data2 }}</span>
  </div>
</ng-container>
<ng-template #loading> ... </ng-template>

或者，更好的是，只需创建一个新的Observable，它将其他两个结合起来。

data$ = combineLatest(data1$, data2$).pipe(map(([v1, v2]) => v1 && v2));

比，只是

<div *ngIf="data$ | async; else loading"> 
  ...
</div>
<ng-template #loading> ... </ng-template>

Answer 2

你可以试试这个：

<ng-container *ngIf="{ data1 :data$ | async, data2:data2$ | async} as data;">
<div *ngIf="data.data1 && data.data2; else loading">

  {{data.data1}}
  {{data.data2}}
</div>
<ng-template #loading>
    loading..........
 </ng-template>
</ng-container>