如何根據可觀察的值（條件）來隱藏/顯示數據？

Question

我玩角2和NGRX但我不是一個RxJs專家...

我如何聲明的行動，派遣他們和油漆簡單的數據

@Component({ 
    selector: 'view-container', 
    template: ` 
    <h1>Seccion {{ viewSection | async }}</h1> 
    <map-section [hidden]="!isMapSection()"></map-section> 
    <graph-section [hidden]="!isGraphSection()"></graph-section> 
    <data-section [hidden]="!isDataSection()"></data-section> 
    ` 
}) 
export class ViewContainer { 

    private viewSection: Observable<MainViewSection>; 

    constructor(
    private store: Store<AppState>, 
    private mainviewActions: MainViewActions 
) { 
    this.viewSection = this.store.let(getMainViewSection()); 
    } 
} 

MainViewSection是一個簡單的枚舉型號：

export enum MainViewSection { 
    Map, 
    Graph, 
    Data 
}; 

我知道如何顯示我使用{{viewSection | async}}可觀測得到這部分，但我怎麼能比較有什麼我越來越爲了隱藏一個或另一個部分？

NGRX之前，我在做這樣的事情：

isGraphSection() { 
    return this.viewSection === MainViewSection.Graph; 
} 

但現在this.viewSection是可觀察到的。任何想法如何實現這一目標？

謝謝！

Answer 1

可以通過管道將它首先然後進行比較，這樣的事情：

{{(viewSection| async) === 1}}