无法读取6中未定义的属性“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>

下面是typescript文件中的函数

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

featureProducts: any;

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

在typescript中

imgpath0 = this.featureProducts[0].imgPath;

在html中直接使用这个变量

{{imgPath0}}

但这并不是一个更好的方法,因为我有很多属性要在html中显示,而且我不能在ts中声明那么多的变量。

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