在一个Angular*ngIf语句中放置两个异步订阅

Question

我的组件模板中有以下内容:

<div *ngIf="user$ | async as user>...</div>

在上面div我想使用异步管道只订阅一次另一个observable,并user在整个模板中像上面一样使用它.例如,这样的事情是可能的:

<ng-template *ngIf="language$ | async as language>
<div *ngIf=" user$ | async as user>
  <p>All template code that would use both {{user}} and {{language}} would go in between</p>
  </div>
</ng-template>

或者甚至可以在一个声明中合并？

Answer 1

您可以将object用作变量:

<div *ngIf="{ language: language$ | async, user: user$ | async } as userLanguage">
    <b>{{userLanguage.language}}</b> and <b>{{userLanguage.user}}</b>
</div>

Plunker示例

也可以看看

• 如何在Angular2中的模板中声明变量

Answer 2

使用"对象作为变量"的问题在于它与问题中的代码没有相同的行为(加上它是*ngIf的轻度滥用以使其始终评估为true).要获得所需的行为,您需要:

<div *ngIf="{ language: language$ | async, user: user$ | async } as userLanguage">
   <ng-container *ngIf="userLanguage.language && userLanguage.user"> 
      <b>{{userLanguage.language}}</b> and <b>{{userLanguage.user}}</b>
   </ng-container>
</div>