`@ ngrx / store`-从包装组件从未调用过createFeatureSelector

时间:2019-02-17 06:58:05

标签: angular7 ngrx-store

这是我的createFeatureSelector ts文件:

import { State } from "./../../state/app.state";
import { EventState, ModelEvent } from "./../models/model.event";

import { createFeatureSelector, createSelector, ActionReducerMap } from "@ngrx/store";

export interface NewState extends State {
    events:EventState
}

const getCalendarFeatureState = createFeatureSelector<EventState>("reducer");

export const getEvents = createSelector(getCalendarFeatureState, state =>  state.events );

我的事件外壳组件(在这里我称为getEvents):

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { Observable } from 'rxjs';

import * as fromRoot from  "./../../state";
import { CalendarActions, Load } from "./../../state/calendar.actions";
import { ModelEvent, EventState } from "./../../models/model.event";

@Component({
    selector: 'calendar-shell',
    templateUrl: './calendar-shell.component.html',
    changeDetection:ChangeDetectionStrategy.OnPush
})
export class CalendarShellComponent implements OnInit {

    events$:Observable<any>

    constructor(private store:Store<fromRoot.NewState>) { }

    ngOnInit():void{

        this.store.dispatch(new Load());
        this.events$ = this.store.pipe(select(fromRoot.getEvents)); //getting nothing!!

    }

}

模板:

<div *ngIf="events$ |  async"> //shows nothing!!
    <ul>
        <li *ngFor="let item of events">{{item.title}}</li>
    </ul>
</div>

有帮助吗?提前致谢。 (准备提供更多详细信息,如果有的话)

1 个答案:

答案 0 :(得分:0)

我这样更新dom元素:

<div *ngIf="events$ |  async"> //shows nothing!!
    <ul>
        <li *ngFor="let item of events | async">{{item.title}}</li>
    </ul>
</div>

工作正常。