2017-01-17 58 views
2

私の店で私はisLoading:boolean値がfalseであり、サーバへのリクエストが開始され、resposeまたはエラーが発生したときにtrueに変更され、falseに戻った。私はコンテナクラスでそれを選択して、このようなプロパティとしてコンポーネントに渡す:角度2 ngrx観察可能な値

@Component({ 
    template: `<some-component [isLoading]="isLoading"></some-component>` 
}) 

class SomeContainer() { 
    private isLoading: Observable<boolean>; 
    constructor(private store: Store<IStore>) { 
    this.isLoading = store.select(isLoadingSelector); 
    } 
} 

そして、私はいくつかの条件付きコンテンツのためにそれを使用したいと思います:

class SomeComponent { 
    @Input() private isLoading: Observable<boolean>; 
    ... 
} 

<div> 
    <span *ngIf="isLoading">Loading</span> 
    <span *ngIf="!isLoading">Some data</span> 
</div> 

しかしisLoadingが観察され、私が取得する必要がありますこのロジックの予想される作業のブール値。

private ngOnInit():void { 
    this.isLoading.subscribe((value) => this.isLoadingBoolean = value); 
} 

とテンプレートでisLoadingBoolean使用:私が見つけた解決策は、次のようにクラスの値を取得しています。

しかし、それは難解です。この問題を解決する良い方法はありますか(おそらくasyncパイプを* ngIfと併用する方法です)?

+0

あなたは '* ngIf ="!(isLoading | async) "'を試しましたか? – chrigu

答えて

3

はあなたのSomeContainerasyncパイプを使用することができます。

@Component({ 
    template: `<some-component [isLoading]="isLoading | async"></some-component>` 
}) 
class SomeContainer() { 
    private isLoading: Observable<boolean>; 
    constructor(private store: Store<IStore>) { 
    this.isLoading = store.select(isLoadingSelector); 
    } 
} 

そして、あなたはboolean入力を使用するために簡略化することができSomeComponent:通常

@Component({ 
    template: ` 
    <div> 
     <span *ngIf="isLoading">Loading</span> 
     <span *ngIf="!isLoading">Some data</span> 
    </div> 
    ` 
}) 
class SomeComponent { 
    @Input() private isLoading: boolean; 
    ... 
} 

を、それが対処することをお勧めしますコンポーネントが「ダム」になるようにコンテナ内のオブザーバブルを参照してください - "Presentational and Container Components"を参照してください。

関連する問題