Javascript @角度为2的ngrx/存储：无法读取未定义的属性

我正在尝试使用Angular 2-RC4学习@ngrx/store。我有一个从我的组件调用的服务，我只是试图在它发生变化时控制台记录一个车辆列表

车辆

export interface Vehicle {
  ...stuff...
}

import {Http, Headers} from '@angular/http';
import {Injectable} from '@angular/core';
import {Store} from '@ngrx/store';
import {Observable} from "rxjs/Observable";
import 'rxjs/add/operator/map';

import {Vehicle} from '../models/vehicle.model';

const BASE_URL = 'http://localhost:3000/vehicles/';
const HEADER = { headers: new Headers({ 'Content-Type': 'application/json' }) };

@Injectable()
export class VehiclesService {
  vehicles: Observable<Array<Vehicle>>;

  constructor(private http: Http, private store: Store<Vehicle[]>) {
    this.vehicles = this.store.select('vehicles');
  }

  loadVehicles() {
    this.http.get(BASE_URL)
      .map(res => res.json())
      .map(payload => ({ type: 'LOAD_VEHICLES', payload: payload }))
      .subscribe(action => this.store.dispatch(action));
  }
}

车辆减速器

import { Vehicle } from '../models';

export interface VehiclesState {
  vins: string[];
  vehicles: { [vin: string]: Vehicle };
}

const initialState: VehiclesState = {
  vins: [],
  vehicles: {}
}

export const vehicles = (state: any = initialState, {type, payload}) => {
  switch (type) {
    case 'LOAD_VEHICLES':
      const vehicles: Vehicle[] = payload;
      const newVehicles = vehicles.filter(vehicle => !state.vehicles[vehicle.vin]);

      const newVehicleVins = newVehicles.map(vehicle => vehicle.vin);
      const newVehiclesList = newVehicles.reduce((vehicles: { [vin: string]: Vehicle }, vehicle: Vehicle) => {
        return mergeObjects(vehicles, {
          [vehicle.vin]: vehicle
        });
      }, {});

      return {
        vins: [...state.vins, ...newVehicleVins],
        vehicles: mergeObjects({}, state.vehicles, newVehiclesList)
      }
  }
}

main.ts

import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { HTTP_PROVIDERS } from '@angular/http';
import { provideStore } from '@ngrx/store'

import { AppComponent, environment } from './app/';
import { vehicles } from './app/shared/reducers/vehicles'

if (environment.production) {
  enableProdMode();
}

bootstrap(AppComponent,
  [
    HTTP_PROVIDERS,
    provideStore(vehicles, {
      vins: [],
      vehicles: {}
    })
  ]
);

车辆服务

export interface Vehicle {
  ...stuff...
}

import {Http, Headers} from '@angular/http';
import {Injectable} from '@angular/core';
import {Store} from '@ngrx/store';
import {Observable} from "rxjs/Observable";
import 'rxjs/add/operator/map';

import {Vehicle} from '../models/vehicle.model';

const BASE_URL = 'http://localhost:3000/vehicles/';
const HEADER = { headers: new Headers({ 'Content-Type': 'application/json' }) };

@Injectable()
export class VehiclesService {
  vehicles: Observable<Array<Vehicle>>;

  constructor(private http: Http, private store: Store<Vehicle[]>) {
    this.vehicles = this.store.select('vehicles');
  }

  loadVehicles() {
    this.http.get(BASE_URL)
      .map(res => res.json())
      .map(payload => ({ type: 'LOAD_VEHICLES', payload: payload }))
      .subscribe(action => this.store.dispatch(action));
  }
}

从'@angular/Http'导入{Http，Headers}；
从“@angular/core”导入{Injectable}；
从'@ngrx/Store'导入{Store}；
从“rxjs/Observable”导入{Observable}；
导入'rxjs/add/operator/map'；
从“../models/Vehicle.model”导入{Vehicle}；
常数基函数http://localhost:3000/vehicles/';
const HEADER={headers:newheaders（{'Content-Type'：'application/json'}）；
@可注射（）
出口级车辆服务{
车辆：可观察；
构造函数（私有http:http，私有存储：存储）{
this.vehicles=this.store.select（'vehicles'）；
}
载重汽车（）{
this.http.get（基本URL）
.map（res=>res.json（））
.map（有效载荷=>（{type:'LOAD_VEHICLES'，有效载荷：payload}））
.subscribe（action=>this.store.dispatch（action））；
}
}

AppComponent

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

import { Vehicle, VehiclesService } from './shared';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  providers: [VehiclesService]
})
export class AppComponent implements OnInit{
  title = 'app works!';

  vehicles: Observable<Vehicle[]>;

  constructor(private vehiclesService: VehiclesService) {
    this.vehicles = vehiclesService.vehicles;

    vehiclesService.loadVehicles();
  }

  ngOnInit() {
    console.log(this.vehicles)
    this.vehicles.subscribe(vehicles => console.log(vehicles));
  }
}

从'@angular/core'导入{Component，OnInit，Input}；
从“rxjs/Observable”导入{Observable}；
从'@ngrx/Store'导入{Store}；
从“./shared”导入{Vehicle，VehiclesService}；
@组成部分({
moduleId:module.id，
选择器：'应用程序根'，
templateUrl:'app.component.html'，
样式URL:['app.component.css']，
供应商：[车辆服务]
})
导出类AppComponent实现OnInit{
title='appworks！'；
车辆：可观察；
建造商（私家车服务：车辆服务）{
此.vehicles=车辆服务.vehicles；
车辆服务。装载车辆（）；
}
恩戈尼尼特（）{
console.log（本车）
this.vehicles.subscribe（车辆=>console.log（车辆））；
}
}

但是当它运行时，我得到一个TypeError

TypeError：无法读取未定义的属性“vehicles”

第一个console.log返回一个Store对象，但订阅似乎失败了

---

知道我做错了什么吗？

没有足够的信息：问题中缺少模板

app.component.ts

但是，请检查如何访问模板中的成员

车辆

。请尝试运算符

？。

而不是

。比如：

{{ yourObject?.vehicles }}

---

您需要将您的

provideStore

更改为

provideStore（{vehicles:vehicles}）

在我的例子中，错误是在reducer对象和接口中使用了不同的名称：

import { LeaderboardParticipant } from './...';
import * as fromLeaderboard from './...';

export interface IState {
    leaderboard: fromLeaderboard.IState;
}

export const reducers = {
    leaderboard: fromLeaderboard.reducer // I used to have 'search' instead of 'leaderboard'
};

export function selectChallengeId(state: IState): string {
    return state.leaderboard.challengeId;
}

export function selectFilterTerms(state: IState): string {
    return state.leaderboard.filterTerms;
}

---

当你申报你的店铺时，我认为正确的方法是：

constructor(private http: Http, private store: Store<VehicleState>)

构造函数（私有http:http，私有存储：存储）

我没有在模板中访问它。错误发生在执行此操作的AppComponent中的

ngOnInit

函数的第二行。还有一些其他问题，但这是主要问题。谢谢你，先生！