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:

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

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

java - How to resolve The method toString() in the type Object is not applicable for the arguments (InputStream) -