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
Pero los datos si me los esta obteniendo, hice un console y me muestra los datos en consola:
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); ?>