ionic 3 ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

0

I am creating an application with ionic and I get the following error when trying to list:

ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

Does anyone know why it appears?

Html

<ion-content>
    <div class="row header">
      <div class="col">Codigo</div>
      <div class="col">Nombre</div>
      <div class="col">Descripcion</div>
      <div class="col">Cantidad</div>
      <div class="col"></div>
    </div>
    <div class="row" *ngFor="let p of posts">
    <ion-item>
      <div class="col">{{p.codigo}}</div>
      <div class="col">{{p.nombre}}</div>
      <div class="col">{{p.desc}}</div>
      <div class="col">{{p.cantidad}}</div>
    </ion-item>
    </div>
  </ion-content>

Typescript

    import { Component} from '@angular/core';
    import { IonicPage, NavController, NavParams } from 'ionic-angular';
    import { FormBuilder } from "@angular/forms";
    import { PostService } from '../../services/post.services';
    import { NgForm } from '@angular/forms';
    import { Post } from '../../model/post';

export class GmaterialesPage {

posts : Array<Post> = [];

    constructor(public navCtrl: NavController, public navParams: NavParams,
         public formBuilder : FormBuilder,public postService: PostService) {

          }

        ngOnInit() {
            this.getPostList();
          }

        getPostList() {
                this.postService.getPost()
          .subscribe(res => {
            this.posts = res;
          });
              }
}

Service

    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    import { Post } from '../model/post';
    import { Observable } from 'rxjs/Observable';

    @Injectable()
    export class PostService {

      selectedPost: Post;



      URL_API = 'http://localhost:3000/api/posts';

      constructor(public http: HttpClient) {
        this.selectedPost = new Post();
      }

      getPost(): Observable<Array<Post>>{
    return this.http.get<Array<Post>>(this.URL_API);
  }

Model

export class Post {

    constructor(_id = '', codigo = '', nombre = '', desc = '', categoria = '' ,cantidad = 0) {
        this._id = _id;
        this.codigo = codigo;
        this.nombre = nombre;
        this.desc = desc;
        this.categoria = categoria;
        this.cantidad = cantidad;
    }

    _id: string;
    codigo: string;
    nombre: string;
    desc: string;
    categoria:String;
    cantidad: number;
}
    
asked by daniel alfaro 15.12.2018 в 03:44
source

1 answer

0

Very good, I have a similar code working right now. Try with:

TS:

posts : Post[];

...
getPostList() {
  this.postService.obtenerPosts().subscribe(
    res=>{this.posts=res; console.log('getPostList()', res);},
    err=>console.log('Error', err));
}

Service:

obtenerPosts():Observable<Post[]>{
    return this.http.get(this.URL_API);
  }
  

Check that it prints exactly.

    
answered by 17.12.2018 в 16:48