Question

我正在使用Angular 2和@ ngrx / store（用于状态管理）

进行示例应用程序

当我执行下面的代码时，我没有收到任何错误，但是预期的错误输出不显示。

// EmployeeState.ts

export interface Employee {
                            id: number;
                            name: string;   
                            isActive: boolean;
                          }

//功能模块es.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { StoreModule } from '@ngrx/store';
import { CommonModule } from '@angular/common';
import { EmployeeComponent } from './employee.component';

import { Employee } from './EmployeeState';
import { EmpReducer } from './EmployeeReducer';

@NgModule({
           imports:[   RouterModule.forChild([
                       {path:'emp' , component: EmployeeComponent}
                       ]),
                       StoreModule.provideStore([{employee: EmpReducer}]),
                       CommonModule 
                   ],

           exports:[],
           providers:[],
           declarations:[EmployeeComponent]
})


 export class EsModule { }

EmployeeReducer.ts

import { Action , ActionReducer } from '@ngrx/store';
import { Employee } from './EmployeeState';

var emp: Employee = { id: 1 , name: 'testname' , isActive: true };

export const EmpReducer : ActionReducer<Employee> = ( state: Employee = emp ,    action: Action) => {
 return state;
}

employee.component.ts

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

import { Employee } from './EmployeeState';

interface AppState {
    employee: Employee;
 }

 @Component({
               selector:'',
               template: `
               <h2> Employee name is: {{emp$.name | async}}</h2>
              `
  })


 export class EmployeeComponent {

    emp$: Observable<Employee>;

    constructor(private store: Store<AppState>) {
    this.emp$ = this.store.select<Employee>('employee');
    }

  }

当EmployeeComponent显示时，我希望输出为＆＃34;员工姓名为：testname＆＃34;但它只是＆＃34;员工姓名是：＆＃34; 。不知道这段代码中的问题是什么。

在Angular2中使用@ ngrx / store

0 个答案: