* ngIfを使用してオブザーバブルを解決する

Question

私のコンポーネントには、$placeと$premiumという2つのオブザーバブルがありますが、テンプレートは両方とも解決する必要があります。

私のテンプレートでは、私は*ngIf="($place | async); else loading; let place"を使用していますが、解決の後に$premiumをどのように変数に割り当てるのか苦労しています。

私はちょうど*ngIf="($place | async) && ($premium | async); else loading; let place; let premium"のようなことを追加しようとしましたが、プレースとプレミアムの割り当てが解除されます。

これを処理するより良い方法はありますか？

Answer 1

あなたはちょうどそのような新しい観測を作成するためにcombineLatestを使用することができます。

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div *ngIf="placeAndPremium$ | async as placeAndPremium"> 
     {{ placeAndPremium.place | json }} 
     {{ placeAndPremium.premium | json }} 
    </div> 
    `, 
}) 
export class App { 
    public place$: Observable<any>; 
    public premium$: Observable<any>; 
    public placeAndPremium$: Observable<any>; 

    constructor() { 
    this.place$ = Observable.of({somePlace: true}).delay(1000); 
    this.premium$ = Observable.of({somePremium: true}).delay(2000); 
    this.placeAndPremium$ = this.place$.combineLatest(this.premium$).map(x => ({place: x[0], premium: x[1]})); 
    } 
} 

はここで働いてPlunkrです：https://plnkr.co/edit/6dtMZevtlDli2Og3gWl9?p=preview