当我尝试检索数据时,我的选择器返回商店对象而不是商店中的值。
这是我的减速剂注射剂。
imports: [
BrowserModule,
StoreRouterConnectingModule,
AppRoutingModule,
StoreModule.forRoot({ 'home': reducer, 'router': routerReducer }),
StoreRouterConnectingModule,
StoreDevtoolsModule.instrument({ maxAge: 50 }),
]
这是我的减速器和状态。
export interface State {
version: number;
}
export const initialState: State = {
version: 1
};
export function reducer(state= initialState, action: Action) {
switch (action.type) {
default:
return state;
}
}
这是我的选择器。
import { createFeatureSelector, createSelector } from '@ngrx/store';
import * as fromRoot from './app.reducer';
export const getHomeData = createFeatureSelector<fromRoot.State>('home');
export const getVersionNumber = createSelector(
getHomeData,
(store) => store.version
);
我得到的输出是
Store {_isScalar: false, actionsObserver: ActionsSubject, reducerManager: ReducerManager, source: Store, operator: DistinctUntilChangedOperator}
actionsObserver
:
ActionsSubject
operator
:
DistinctUntilChangedOperator
reducerManager
:
ReducerManager
source
:
Store
_isScalar
:
false
__proto__
:
Observable
这就是我访问我的选择器的方式。
export class AppComponent {
constructor(public store: Store<State>) {
console.log(this.store.select(getVersionNumber));
}
}
提前致谢。
答案 0 :(得分:0)
尝试通过组件订阅可观察的
export class AppComponent {
public getVersionNumber$: Observable<number>;
constructor(public store: Store<State>) {
getVersionNumber$ = this.store.select(getVersionNumber)
.pipe(
tap(versionNumber => console.log(versionNumber))
)
.subscribe();
}
}
这不是100%干净的,因为您必须处理退订。 如果您可以在庙宇中找到一个地方来挂订,那就更好了:
// component
export class AppComponent {
public getVersionNumber$: Observable<number>;
constructor(public store: Store<State>) {
getVersionNumber$ = this.store.select(getVersionNumber)
.pipe(
tap(versionNumber => console.log(versionNumber))
);
}
}
// somewhere in template
<ng-container *ngIf="(getVersionNumber$ | async) as getVersionNumber">
{{getVersionNumber}}
</ng-container>
异步管道将自动处理订阅