2017-10-29 13 views
0

angularで動作するreduxのストアプロパティにアクセスすることはできません。reduxストアのプロパティにアクセスできない

IAppには2つのプロパティがあります。最初はインターフェイスで、2つ目は数値です。

interface AppStoreInterface { 
    layoutInterface: LayoutInterface, 
    numero: number 
} 

私は問題なく数字にアクセスできますが、レイアウトインターフェイスにアクセスしようとすると、問題は発生します。

これはモジュールです:

export class AppModule { 

    constructor(
    ngRedux: NgRedux<AppStoreInterface>, 
    public devTools: DevToolsExtension 
) { 

    const storeEnhancers = devTools.isEnabled() ? [devTools.enhancer()] : []; 

    ngRedux.configureStore(
     rootReducer, 
     INITIAL_STATE, 
     [], 
     storeEnhancers 
    ); 
    } 
} 

、これはコンポーネントです:

export class MainLayoutComponent implements OnInit { 

    @select(['layoutInterface', 'sidebarStatus']) sidebarStatus$: boolean; 
    @select('numero') test$ :number; 

constructor(
    public translate: TranslateService, 
    public dialog: MdDialog, 
    private ngRedux: NgRedux<AppStoreInterface>, 
    private actions: LayoutActions 
) { 
    const browserLang: string = translate.getBrowserLang(); 
    translate.use(browserLang.match(/en|es/) ? browserLang : 'en'); 

    this.siteStyle = "app"; 
    this.boxed = ""; 
    this.align = "start"; 
    this.currentLang = "en"; 
    this.showSettings = false; 
    this.showLeftButtton = false; 
    this.userLoggedIn = false; 

    //this.store = this.getStoreService(); 
    //this.layoutInterface = this.getLayoutInterface(); 
    } 
} 

は私が間違って何をしているのですか?

答えて

0

あなたが店から値を取得しますが、その値のObservableません@select使用しています。値にアクセスするには、Observableに登録する必要があります。

@select(['layoutInterface', 'sidebarStatus']) sidebarStatus$: Observable<boolean>; 
                   ^^^^^^^^^^^^^^^^^^^^ 
@select('numero') test$: Observable<number>; 
         ^^^^^^^^^^^^^^^^^^^ 

あなたは、直接asyncパイプを使用して、コンポーネントのテンプレート(HTML)にアクセスすることができます。

<span *ngIf="sidebarStatus$ | async">Sidebar</span> 

また、コンポーネントのクラスで明示的にサブスクライブすることもできます。値をsidebarStatus: boolean;のように別のフィールドに割り当てます。

ngOnInit() { 
    this.sidebarStatus$.subscribe(sidebarStatus => this.sidebarStatus); 
} 
関連する問題