在一个Angular * ngIf语句

Question

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

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

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

您可以将对象用作变量：

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

<强> Plunker Example

另见

• How to declare a variable in a template in Angular2

Answer 2

使用＆＃34;对象作为变量＆＃34;是因为它没有问题中的代码具有相同的行为（加上它*轻微滥用* 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应该只选择呈现模板。我编写了一个<div *ngxInit="{ language: language$ | async, user: user$ | async } as userLanguage"> <!-- content --> </div> 指令，即使表达式结果为“falsy”，也总是呈现。

pageid/videos/...

请参阅https://github.com/amitport/ngx-init