Невозможно прочитать свойство '0' из неопределенного в угловых 6

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 объявлен внутри класса как

featureProducts: any;

Я знаю, что есть работаВокруг этой проблемы, как я могу использовать несколько переменных, как показано ниже

в машинописи

imgpath0 = this.featureProducts[0].imgPath;

И использование этой переменной в html напрямую как

{{imgPath0}}

Но этоне лучший подход, так как у меня есть много свойств, которые будут отображаться в HTML, и я не могу объявить столько переменных в TS.

Примечание: Я не хочу использовать цикл«для» в HTML.Вместо этого мне нужно получить свойства, как мы обычно делаем в 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>