无法读取角度 6 中未定义的属性'0'

Question

我在控制台中收到此错误，无法读取未定义的属性"0">，但仍然按预期得到结果。

这是我的 HTML 代码

<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>

这是打字稿文件中的功能

getFeatureProducts(){
this.httpClient.get(this.baseUrl+`/getFeatureProducts`)
.subscribe(
(data:any[]) => {
if(data.length) {
this.featureProducts = data;
}else{
this.featureProducts = null;         
}
}
)}

功能产品在类内声明为

featureProducts: any;

我知道这个问题有解决方法，比如我可以使用多个变量，如下所示

在打字稿中

imgpath0 = this.featureProducts[0].imgPath;

并直接在 html 中将此变量用作

{{imgPath0}}

但这不是更好的方法，因为我有很多属性要在 html 中显示，并且我不能在 ts 中声明尽可能多的变量。

注意：我不想在 html 中使用"for"循环使用。相反，我需要像通常在 JSON 中那样获取属性。

Answer 1

您可以使用*ngIf="featureProducts && featureProducts[0]"并阻止呈现div，直到填充featureProducts对象。

<div class="slider-product" *ngIf="featureProducts && featureProducts[0]">
<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>