0

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?

1
  • Saludos. Tienes declarado que producto es un array; tal que, debes indicar el indice del array y entonces sí, indicar la propiedad. el 19 jul. 2020 a las 0:43

1 respuesta 1

0

Esto se debe a los ciclos de vida del componente, es decir:

Primero se renderiza el témplate donde tiene tu variable producto['nombre'] pero la petición de estos datos se hace en el ciclo de vida ngOnInit que actua despues del primer render así pues a eso se debe el error, trata de renderizar algo que no existe la primera vez y luego que se retornan los datos ya es posible hacerlo.

Para solucionar este molesto mensaje puedes agregar un ngIf:

<h4 *ngIf="producto">{{producto['nombre']}}</h4>

Espero te sirva

Tu Respuesta

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

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