0

Estoy creando una aplicación con ionic y me aparece el siguiente error al tratar de listar:

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

Alguien sabe porque aparece?

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

Servicio

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

Modelo

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

1 respuesta 1

0

Muy buenas, tengo un código similar funcionando ahora mismo. Prueba con:

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

Comprueba que imprime exactamente.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.