I'm currently facing an issue with displaying data from my SQL database on a server. Even though the data is being retrieved correctly, it's not showing up in my application. Strangely, when I console.log it, everything displays perfectly in the console.
Here is the interface in TypeScript:
export interface IProduct {
productID: string;
productImage: string;
productName: string;
productDescription: string;
productRating: number;
productPrice: number;
}
This is the page.ts file:
export class ViewProductPage implements OnInit {
product: IProduct;
constructor(private service: CustomerService) { }
ngOnInit() {
this.service.getProduct().subscribe((data: any) => {
this.product = data;
console.log(this.product);
});
}
}
And here is the HTML code:
<ion-content color="dark">
<div class="product-image-container">
<div class="product-image-wrapper">
<img [src]="'https://via.placeholder.com/1000'">
</div>
<div class="product-name">
<h1>{{ product.productName }}</h1>
</div>
</div>
<div class="product-description">
<h6>Price:</h6>
<p>{{ product.productPrice }}</p>
<h6>Description:</h6>
<p>{{ product.productDescription }}</p>
</div>
</ion-content>
The error message displayed in the console is:
ERROR TypeError: can't access property "productName", ctx.product is undefined
Here is the method for getting the product:
getProduct(): Observable<IProduct> {
return this.http.get<IProduct>(this.baseURI + 'CustomerOrder/GetProduct/' + this.productID);
}