使用@ ngrx / store重新选择Angular 2会导致未定义的错误

Question

我对Angular很新，我跟随this tutorial使用ngrx store管理全局状态。 Angular 5.1.1 / Typescript 2.4.2

admin / networks是一个延迟加载的模块。 我试图显示一个基于EDIT_FIELD状态值的内联形式的选择器（从表单中更改） 我在页面加载时在浏览器控制台中收到此错误。

＆＃34; TypeError：无法读取属性＆＃39; editedField＆＃39;未定义的     at getEditedField（_reducers / network.ts:43）＆＃34;

由于某种原因，它没有认识到＆＃34;状态＆＃34;在文件的开头声明。 知道为什么吗？谢谢！

结构

```
app
│
└───_actions
          │
          network.ts
│
└───_reducers
          │
          index.ts
          network.ts
│
└───_models
│        │
|         network.ts
└───theme
│   └───pages
│         └───admin
│              └───networks
|                    │
|                 networks.module.ts
|                 networks.component.ts
|                 networks.component.html
│                   └───network
|                             │
|                          network.ts
|                          network.html
|                          network-name.ts
|                          network-name.html
```

_actions / network.ts

import { Network } from '../_models/network';


export const EDIT_FIELD = '[Network] Edit Field';


export class EditFieldAction implements Action {
  readonly type = EDIT_FIELD;

      constructor(public payload: string) {
      }
}


export type Actions = EditFieldAction;

_reducers / network.ts

import { Network } from '../_models/network';
import { ActionReducer, Action } from '@ngrx/store';
import * as networkAction from '../_actions/network';


export interface State {
  editedField: string;
}

export const initialState: State = {

  editedField: null,

};



export function reducer(state = initialState, action: networkAction.Actions) {


  switch (action.type) {

        case networkAction.EDIT_FIELD: {

          return Object.assign({}, state, {
            editedField: action.payload
          });  

        }   

    default: {
      return state;
    }
  }
}

*** this line is giving me the error **
export const getEditedField = (state: State) => state.editedField;

_reducers / index.ts

import { compose } from '@ngrx/core/compose';
import { createSelector } from 'reselect';
import { combineReducers } from '@ngrx/store';
import { ActionReducer } from '@ngrx/store';
import * as fromNetwork from './network';


export interface State {
  network: fromNetwork.State;

} 

const globalReducers = {
  network: fromNetwork.reducer,
};

const globalState: ActionReducer<State> = combineReducers(globalReducers);

export function reducer(state: any, action: any) {
      return globalState(state, action);
}

export const getNetworkState = (state: State) => state.network;

export const getNetworkEditedField = createSelector(getNetworkState, fromNetwork.getEditedField);

_models / network.ts

export interface Network {
  nid: string;
  networkName: string;
  startAddress: string;
  endAddress: string;
  groups: string[];
}

export interface NetworkName {
  networkName: string;
}

主题/页/管理/网络/ networks.component.ts

import { Component, OnInit, ViewEncapsulation, AfterViewInit, Input, EventEmitter, Output } from '@angular/core';
import { Helpers } from '../../../../helpers';
import { ScriptLoaderService } from '../../../../_services/script-loader.service';
import { AuthComponent} from "../../../../auth/auth.component";
import { NetworksService} from "../../../../auth/_services/networks.service";
import { Network, NetworkName  } from "../../../../_models/network";

import { Observable } from "rxjs/Observable";
import { Store, StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import * as _network from "../../../../_actions/network";
import * as fromRoot from "../../../../_reducers";

@Component({
selector: ".m-grid__item.m-grid__item--fluid.m-wrapper",
templateUrl: "./networks.component.html",
encapsulation: ViewEncapsulation.None,
})
    export class NetworksComponent implements OnInit, AfterViewInit {

    @Input() networkList;
    editedField$: Observable<string>;
    loading = false;
    verifiedAdmin = false;  

    constructor(private _script: ScriptLoaderService,
                private _auth: AuthComponent,
                private _networksService: NetworksService,
                private _store: Store<fromRoot.State>)  {

                ** error starts here **  
                this.editedField$ = this._store.select(fromRoot.getNetworkEditedField);

    }

    ngOnInit()  {
        this.getNetworkList(); 
    }

    changeEditedField(field) {
      this._store.dispatch(new _network.EditFieldAction(field));
    }   

    getNetworkList() {
            this.loading = true;
            this._networksService.verifyAdmin()
            .subscribe(result => {
                    if (result.status == 'ok' ) {

                        this._networksService.getAll()
                            .subscribe(networks => {
                               this.networkList = networks['data'];
                               this.loading = false;
                            }, error => {

                         });                                

                    }   else {

                        return false;
                    }       
                });
    }       


    ngAfterViewInit()  {
        this._script.load('.m-grid__item.m-grid__item--fluid.m-wrapper',
        'assets/app/js/dashboard.js');

    }

}

主题/页/管理/网络/ networks.component.html

...
    <div class="m-content">
            <div class="row">
                <div class="col-xl-4">
                <div class="m-portlet__body">
                <app-networks 
                  [networkList]="networkList"
                  [editedField]="editedField$ | async"
                  (changeEditedField)="changeEditedField($event)">
                 </app-networks>
                </div>
             </div>
...