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

Question

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

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

在上面的 div 中，我想使用异步管道只订阅另一个可观察对象一次，并像上面的 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

您可以使用对象作为变量：

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

Plunker Example

另见

Answer 2

使用 "object as variable" 的问题是它的行为与问题中的代码不同（此外，*ngIf 的计算结果始终为 true 是对 *ngIf 的轻微滥用）。要获得所需的行为，您需要：

<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>

Answer 3

虽然其他解决方案有效，但它们略微滥用了 ngIf 的目的，后者应该只选择性地呈现模板。我写了一个 ngxInit 指令，即使表达式结果是 "falsy".

也总是呈现

<div *ngxInit="{ language: language$ | async, user: user$ | async } as userLanguage">
   <!-- content -->
</div>

见https://github.com/amitport/ngx-init

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

Putting two async subscriptions in one Angular *ngIf statement

observable

angular

angular-observable