There's an error popping up in the console saying, Cannot read property '0' of undefined, but surprisingly I'm still getting the expected result.
Below is my HTML code snippet:
<div class="col-md-3">
<div class="slider-product">
<a href="#">
<img src="{{featureProducts[0].img_path}}" alt="Image" style="max-width:100%;">
<span class="tag">{{featureProducts[0].cat_name}}</span>
<div>
<a class="title">{{featureProducts[0].name}}</a>
</div>
<div class="price">
<i class="fa fa-inr"></i> {{featureProducts[0].min_price}}
</div>
</a>
</div>
</div>
This is how the equivalent TypeScript function looks like:
getFeatureProducts(){
this.httpClient.get(this.baseUrl+`/getFeatureProducts`)
.subscribe(
(data:any[]) => {
if(data.length) {
this.featureProducts = data;
}else{
this.featureProducts = null;
}
}
)}
The variable featureProducts is declared within the class as shown below:
featureProducts: any;
I understand there's a possible workaround for this issue, such as creating separate variables like so:
In TypeScript file:
imgpath0 = this.featureProducts[0].imgPath;
And then using this new variable directly in the HTML as demonstrated here:
{{imgPath0}}
However, this solution might not be ideal considering the number of properties to display in HTML without declaring too many extra variables in TypeScript.
Please note: I prefer not to loop through using 'for' in HTML. Instead, I'd like to fetch the properties similar to typical JSON retrieval methods.