web-dev-qa-db-ja.com

2つの非同期サブスクリプションを1つに入れるAngular * ngIfステートメント

コンポーネントテンプレートに次のものがあります。

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

上記のdiv内で、非同期パイプを使用して別のオブザーバブルを1回だけサブスクライブし、テンプレート全体で上記の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つのステートメントにまとめることもできますか？

angularobservableangular-observable
20
Sammy

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

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

Plunkerの例

こちらもご覧ください

16
yurzui

「オブジェクトを変数として使用」の問題は、問題のコードと同じ動作をしないことです（さらに、常に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>
7
kayjtea

他のソリューションは機能しますが、ngIfの目的をわずかに乱用し、オプションでテンプレートをレンダリングするだけです。式の結果が「偽」であっても常にレンダリングするngxInitディレクティブを作成しました。

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

https://github.com/amitport/ngx-init を参照してください

2
Amit Portnoy