*複数の非同期パイプ変数を持つngIf

Question

*ngIfに2つの観測値を結合しようとしていて、両方が放出されたときにユーザーインターフェイスを表示しようとしました。

テイク：

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

から：Putting two async subscriptions in one Angular *ngIf statement

これは、限り、それはlanguage$とuser$は、2つのHTTPリクエストからだろう私の場合、ただしコンパイルし、それがuser$がTypeError: _v.context.ngIf.user is undefinedのようなランタイムエラーをスロー思えるように動作します。基本的に私が本当に欲しいもの

（これは動作しません）です：

<div *ngIf="language$ | async as language && user$ | async as user"> 
    <b>{{language}}</b> and <b>{{user}}</b> 
</div> 

は最適なソリューションです：

• は、コンポーネント内の購読と結合するには、変数
• に書き込みますコンポーネント内の2つの観測値は、withLatestFrom
• nullチェックを追加します。{{userLanguage?.user}}

Answer 1

この条件は、ネストされたngIfディレクティブで処理する必要があります。

<ng-container *ngIf="language$ | async as language"> 
    <div *ngIf="user$ | async as user"> 
    <b>{{language}}</b> and <b>{{user}}</b> 
    </div> 
<ng-container> 

欠点は、HTTP要求が連続して実行されることです。

それらを同時に実行し、まだlanguageとuser変数を持つためには、より多くのネスティングが必要とされています。これを行うには

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

もっと効率的な方法の方法は、この時点でコンポーネントのクラスにテンプレートからロジックを移動することで、単一の観測可能なものを作成するwithLatestFrom

Answer 2

それはあなたが何を望んでいるかに依存しますが、私は、読み込まれたフラグを持つforkJoin演算子はいい考えです。

https://www.learnrxjs.io/operators/combination/forkjoin.html

forkJoinはあなたが購読して表示するのonErrorにエラーをキャッチすることができ、その購読

Observable.forkJoin(
    Observable.of("my language").delay(1000), 
    Observable.of("my user").delay(1000), 
).subscribe(results => { 
    this.language = results[0] 
    this.user = results[1] 
}) 

内のすべての観測は、それらの値を返すために完了していることを待ちます。