Tengo una api que me manda un json algo así
{"id":"prod1","nombre":"name","descripcion":"descripcion","precio":"2690","tamano":"200 ml"}
lo recibo recibo con un componente
import { Component, OnInit } from '@angular/core';
import {DataService} from '../productos/data.service'
import {ProductoI} from 'src/app/models/productos.interface'
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-detalle',
templateUrl: './detalle.component.html',
styleUrls: ['./detalle.component.styl']
})
export class DetalleComponent implements OnInit {
producto: ProductoI[];
constructor(private dataServ: DataService, private route: ActivatedRoute) { }
ngOnInit(): void {
let idProducto= this.route.snapshot.paramMap.get('id');
this.dataServ.setUrlDetalle(idProducto);
this.dataServ.getDetalle().subscribe(data=>{
this.producto=data;
});
}
}
Y hasta ahi no hay problema, solo que al intentar leer una propiedad desde la vista con
<h4>{{producto['nombre']}}</h4>
el explorador me lanza el error Cannot read property 'nombre' of undefined. Pero aun así el h4 si muestra el texto, lo que me da curiosidad, por que si se renderiza todo correctamente si me se lanza el error? Como lo puedo solucionar?
producto
es un array; tal que, debes indicar el indice del array y entonces sí, indicar la propiedad.