0

Tengo un error al obtener los datos en mi vista angular les agradezco mucho de antemano..eh pasado ayer y hoy buscando soluciones pero no lo he logrado..el error que me sale en la consola del navegador es este:

ERROR Error: NG0900: Error trying to diff '[object Object]'. Only arrays and iterables are allowed Angular 7 Este error me aparece 3 veces introducir la descripción de la imagen aquí

Pero los datos si me los esta obteniendo, hice un console y me muestra los datos en consola:

introducir la descripción de la imagen aquí

adjunto mi codigo angular y php : modelo categoria:

export class Categoria {
id: number;
nombre: string;
imagen: string;

constructor(id: number, nombre: string, imagen: string) {
    this.id = id
    this.nombre = nombre;
    this.imagen = imagen;
}

}

el servicio para obtener los datos:

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

@Injectable({
  providedIn: 'root'
})
export class DatosService {

  constructor(private http: HttpClient) { }

  obtenerRopa(): Observable<any> {
    return this.http.get<any>('http://localhost/catalogo/backend/obtener_ropa.php');
  }

}

el componente.ts:

import { Component, OnInit } from '@angular/core';
import { Categoria } from '../models/categoria.models';
import { DatosService } from '../services/datos.service';

@Component({
  selector: 'app-catalogo-hombre',
  templateUrl: './catalogo-hombre.component.html',
  styleUrl: './catalogo-hombre.component.css'
})
export class CatalogoHombreComponent implements OnInit {
    ropas: Categoria[] = [];

    constructor(private datosService: DatosService) {}

    ngOnInit(): void {
        this.obtenerRopa();
    }

    obtenerRopa(): void {
        this.datosService.obtenerRopa().subscribe(
            (data: Categoria[]) => { 
            
                this.ropas = data;
                console.log(this.ropas);
            },
            (error) => {
                console.log(error);
            }
        );
    }
}

la vista de mi componente

<div class="main-content">
<h2 class="main-content__title">Catálogo de Hombre </h2>
<div class="main-content__tarjetas">  
    <div *ngFor="let ropa of ropas">

        <div>ID: {{ ropa.id }}</div>
        <div>Nombre: {{ ropa.nombre }}</div>
        <img src="{{ropa.imagen}}">
      </div>
      
</div>

mi archivo php para obtener los datos de la tabla:

<?php
include('./cors.php');
require('./conexion.php');


$rpta = array(
    'status' => 'ERROR',
    'message' => 'Error desconocido'
);

try {
    $conn = dameConexion();

    $sql = "SELECT * FROM `ropa`";
    $stmt = $conn->query($sql);

    $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
    $rpta = array(
        'status' => 'OK',
        'message' => 'Se obtuvieron los datos correctamente',
        'datos' => $rows
    );
} catch (PDOException $e) {

$rpta['error'] = $e->getMessage();

}

echo json_encode($rpta); ?>

1 respuesta 1

1

Tenes un error al tratar de asignarle el valor a la variable ropas dentro del componente CatalogoHombreComponent, porque le estas asignando la del cuerpo de la respuesta (que es un objeto, por lo tanto no lo podes iterar en el bucle con el *ngFor) a tu variable local, la asigación debería ser:

obtenerRopa(): void {
        this.datosService.obtenerRopa().subscribe(
            (data) => {
                this.ropas = data.datos;
                console.log(this.ropas);
            },
            (error) => {
                console.log(error);
            }
        );
    }

Cuando haces el subscribe a tu llamada http, tu API devuelve un objeto de este tipo:

interface CategoriaResponse {
status: string,
message: string,
datos: Categoria[]
}

(Ejemplo de tipado)

Podes parametrizar tu respuesta desde el service agregando el tipado correspondiente:

return this.http.get<CategoriaResponse>('http://localhost/catalogo/backend/obtener_ropa.php');

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.