無法使@ ngrx / store正常工作

Question

我有這個Angular 2應用程序。 我正在嘗試將@ ngrx / store添加到應用程序，但似乎無法使其正常運行。 這是我目前要做的：

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; } } 

product.service.ts

 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> 

我覺得我快到了，因為{{產品| async}}向我顯示了結果。 我只是沒有得到* ngFor使我滿意的錯誤：

原來的例外：找不到類型為“對象”的其他支持對象“ [對象對象]”。 NgFor僅支持綁定到Iterables，例如數組。

我的意思是我理解這意味着什么，但是我不知道為什么得到這個。 我覺得我完全有芭蕾舞短裙所顯示的...

我使用過的鏈接：

• http://onehungrymind.com/build-better-angular-2-application-redux-ngrx/
• Angular2 + ngrx / store用於處理失敗的HTTP請求
• https://egghead.io/courses/building-a-time-machine-with-angular-2-and-rxjs

不幸的是，幾乎所有內容都已過時（不是RC5）。

更新：我只是意識到，如果我這樣做{{產品| 異步| json}}在我的html文件中，我得到了所有數據。 這樣就可以了，我不明白為什么我用* ngFor遇到這個錯誤。

Answer 1

在減速器上，您需要將狀態初始化為數組而不是對象。

現在你有

state: any = {}

做了

state: any = []

當模板最初嘗試呈現html時，它正在嘗試迭代“產品”的初始狀態，該狀態是一個對象而不是一個數組。

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;
    }
}