Ввод двух асинхронных подписчиков в один оператор Angular * ngIf

В моем шаблоне компонента есть следующее:

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

Ответ 1

Вы можете использовать объект как переменную:

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

Пример плунжера

См. также

Как объявить переменную в шаблоне в Angular2

Ответ 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>