1

estoy consumiendo un servicio de una API en Node.JS y MongoDB esta es la consulta.

this._productService.getProductById(productId).subscribe(
  response => {
    this.product = response['product'];
  },
  error => {
    console.log('Error');
  }
);

Cuando se completa la petición se guarda el valor del resultado en la variable product, pero la web renderizar antes el contenido de esa variable antes de que el servicio introduzca los datos que devuelve el backend, como puede decirle que espere que el servicio devuelva los datos y después muestre los datos en el html? yo en el HTML lo tengo así.

{{product.name}}

Pero me da el siguiente error.

ERROR TypeError: Cannot read property 'name' of undefined
at Object.eval [as updateDirectives] (ProductComponent.html:6)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:22477)
at checkAndUpdateView (core.js:21873)
at callViewAction (core.js:22114)
at execComponentViewsAction (core.js:22056)
at checkAndUpdateView (core.js:21879)
at callViewAction (core.js:22114)
at execEmbeddedViewsAction (core.js:22077)
at checkAndUpdateView (core.js:21874)
at callViewAction (core.js:22114)

Y el ngOnInit() lo tengo así.

  ngOnInit() {
this.url = GLOBAL.url;
this.categoryId = this._activatedRoute.snapshot.paramMap.get("category");
this.productId = this._activatedRoute.snapshot.paramMap.get("product");
this.getProductById(this.productId);

}

1
  • 1
    Para evitar el error puedes hacer un ngIf y consultar que product no sea nulo
    – lDanny7
    el 3 ene. 2019 a las 10:59

1 respuesta 1

1

Angular tiene una sintaxis que permite solucionar este error de un modo sencillo:

{{product?.name}}

Esto es lo mismo que en simple Javascript sería

{{product == null ? '' : product.name}}

Pero tiene la ventaja de que se puede enlazar fácilmente:

{{a?.b?.c}} // muestra c si tanto a como b no son null o undefined
1
  • Gracias ya lo he solucionado tal y como me lo has indicado, un saludo. el 3 ene. 2019 a las 11:58

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.