Is there a way for me to update the HTML using the properties obtained within .subscribe? I am aware that .subscribe is asynchronous and therefore returns an undefined value initially, but how can I ensure it waits until the value is resolved? Currently, I am only receiving undefined for the object properties.
Below is my service method where I make the API call to retrieve the data:
fetchCustomers(name: string) Observable<Customer[]> {
return this.http.get<Customer>('MY URL')
}
And here is the component in which I subscribe to it:
customer: any;
name: string;
ngOnInit() {
//this.name = /*code to retrieve the name*/
this.renderCustomer(this.name)
}
renderCustomer(name) {
this.testService.fetchCustomer(name).subscribe(data => {
this.customer = data
})
}
However, when calling the method this.customer, it remains undefined. I need the properties of data to render in my HTML file as shown below:
<tr> {{ customer.companyName }} </tr>
<tr> {{ customer.fullName }} </tr>
<tr> {{ customer.Email }} </tr>
How can I modify the line this.customer = data so that it waits for the Observable to be resolved? I have also attempted
this.customer = JSON.parse(JSON.stringify(data))