angular - 2 つの非同期サブスクリプションを 1 つの 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>

それとも、これを 1 つのステートメントにまとめることができますか?

Answer 1

オブジェクトを変数として使用できます。

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

プランカーの例

こちらもご覧ください

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