angular - Can't make @ngrx/store works properly -
i have angular 2 app works. i'm trying add @ngrx/store app seem can't make work. here have far :
product.component.ts
import {component, input, changedetectionstrategy} "@angular/core"; import {productservice} "../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} '@ngrx/store'; import {product} "./index"; export const products: actionreducer<product> = (state: = {}, action:action) => { switch (action.type) { case 'add_products': return action.payload; default: return state; } }
product.service.ts
import {injectable} "@angular/core"; import {httpservice} "../shared/services/http.service"; import {store} "@ngrx/store"; import {appstore} "../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>
i feel i'm there because {{products | async}} shows me results. don't error *ngfor grives me :
original exception: cannot find differ supporting object '[object object]' of type 'object'. ngfor supports binding iterables such arrays.
i mean understand means, have no idea why this. feel have tutos shows...
links i've used:
- http://onehungrymind.com/build-better-angular-2-application-redux-ngrx/
- angular2 + ngrx/store handling failure http requests
- https://egghead.io/courses/building-a-time-machine-with-angular-2-and-rxjs
unfortunatly, outdated (not rc5).
update: juste realise if {{products | async | json}} in html file, datas. it's working, juste dont why error *ngfor.
on reducer need initialize state array , not object.
right have
state: = {}
make
state: = []
when template tries render html trying iterate initial state of "products" object , not array.
Comments
Post a Comment