I am consuming a service from an API in Node.JS and MongoDB this is the query.
this._productService.getProductById(productId).subscribe(
response => {
this.product = response['product'];
},
error => {
console.log('Error');
}
);
When the request is completed, the value of the result is saved in the product variable, but the web will first render the content of that variable before the service enters the data that the backend returns, as you can tell it to wait for the service to return the data and then display the data in the html? I have it like this in the HTML.
{{product.name}}
But it gives me the following 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)
And the ngOnInit() I have it like this.
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);
}
Angular has a syntax that allows to solve this error in a simple way:
This is the same as in plain Javascript it would be
But it has the advantage that it can be linked easily: