@ ngrx/store가 제대로 작동하지 않습니다.

Question

나는이 Angular 2 app을 사용할 수 있습니다. 나는 @ ngrx/store를 app에 추가하려고하는데, 제대로 작동하지 않을 것 같다.

product.component.ts

import {Component, Input, ChangeDetectionStrategy} from "@angular/core"; 
 

 
import {ProductService} from "../index"; 
 

 
declare const module; 
 

 
@Component({ 
 
    selector: 'products', 
 
    moduleId: module.id, 
 
    providers: [ProductService], 
 
    templateUrl: '_products.component.html', 
 
    styleUrls: ['_products.component.css'], 
 
    changeDetection: ChangeDetectionStrategy.OnPush 
 
}) 
 
export class _ProductsComponent { 
 

 
    products; 
 

 
    constructor(private productService: ProductService) { 
 
     this.products = this.productService.products$; 
 
     this.productService.loadProducts(); 
 
    } 
 

 
}

product.reducer.ts

import {ActionReducer, Action} from '@ngrx/store'; 
 
import {Product} from "./index"; 
 

 
export const products: ActionReducer<Product> = (state: any = {}, action:Action) => { 
 
    switch (action.type) { 
 
     case 'ADD_PRODUCTS': 
 
      return action.payload; 
 

 
     default: 
 
      return state; 
 
    } 
 
}

프로 : 여기 내가 멀리에있을 것입니다 | {{제품 때문에

import {Injectable} from "@angular/core"; 
 

 
import {HttpService} from "../shared/services/http.service"; 
 
import {Store} from "@ngrx/store"; 
 
import {AppStore} from "../shared/store.interface"; 
 

 
@Injectable() 
 
export class ProductService { 
 

 
    products$; 
 

 
    constructor(
 
     private store: Store<AppStore>, 
 
     private httpService: HttpService) { 
 
     this.products$ = store.select('products'); 
 
    } 
 

 
    loadProducts() { 
 
     return this.httpService.call('get', 'home') 
 
      .map(res => res.json()) 
 
      .map(payload => ({ type: 'ADD_PRODUCTS', payload })) 
 
      .subscribe(action => this.store.dispatch(action)) 
 
    } 
 

 
}

<div class="grid_products"> 
 
    {{products | async}} // shows: [object Object],[object Object],[object Object],[object Object].... 
 
    <product*ngFor="let product of products | async" [product]="product" class="grid_product alcenter"></product> // gives me errors 
 
</div>

내가 거의 다 해요 같은 느낌 duct.service.ts 비동기}} 결과를 보여줍니다. * ngFor가 나에게주는 오류가 발생하지 않습니다.

원본 예외 : 'object'유형의 'object object'를 찾을 수 없습니다. NgFor는 배열과 같은 Iterable에 대한 바인딩 만 지원합니다.

나는 그것이 의미하는 바를 이해하고 있음을 의미하지만, 나는 이것을 얻지 못한다.

• http://onehungrymind.com/build-better-angular-2-application-redux-ngrx/
• Angular2 + ngrx/store for handling failure HTTP requests
• https://egghead.io/courses/building-a-time-machine-with-angular-2-and-rxjs는
가

가

는 불행히도, 거의 모든 오래된 : 나는 tutos 보여줍니다 정확히 가지고있는 것처럼 내가 ... 내가 사용했습니다

링크를 느낀다 (RC5 아님).

업데이트 : 나는 {{제품 | 비동기 | json}} 내 HTML 파일에서 모든 데이터를 가져옵니다. 그래서 작동 중입니다. * ngFor로이 오류가 발생하는 이유는 알 수 없습니다.

Answer 1

감속기에서 개체가 아닌 배열로 상태를 초기화해야합니다.

은 지금 당신이

state: any = {} 

가 확인해야 함

템플릿이 객체는 "제품"의 초기 상태를 반복하려고 처음 HTML 렌더링을 시도

state: any = [] 

및 배열이 아닙니다.

Answer 2

이에 감속기를 변경

이 나타납니다

import {ActionReducer, Action} from '@ngrx/store'; 
import {Product} from "./index"; 

export const products: ActionReducer<Product[]> = (state: Product[] = [], action:Action) => { 
    switch (action.type) { 

     case 'ADD_PRODUCTS': 
      state.push(action.payload); 
      return state; 

     default: 
      return state; 
    } 
}