Uncaught: TypeError: Невозможно прочитать свойство 'featured_src' из неопределенного

Question

Когда я пишу

console.log(JSON.parse(data.body)) 

, я получаю массив продуктов с их значениями, но когда я хочу использовать его в своем ионном приложении, я получаю следующую ошибку

HomePage.html: 10 ОШИБКА TypeError: Невозможно прочитать свойство 'featured_src' из неопределенного

Это мой home.ts:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import * as WC from 'woocommerce-api';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

WooCommerce: any;
products: any[];
  constructor(public navCtrl: NavController) {
    this.WooCommerce = WC({

      url:"http://localhost/wordpress/",
      consumerKey: "ck_f55351d5b3fa3c6f20620c3f58852be0965260e5",
      consumerSecret:"cs_e2dd57948e51cd2c1997e8952dabd82770378844"
    });
    this.WooCommerce.getAsync("products").then((data)=> {
      console.log(JSON.parse(data.body).products[0].title);
      this.products = JSON.parse(data.body).products;

    },(err) =>{
      console.log(err)
    })
  }

}

Этомой home.html :

    <ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-card>
  <ion-slides autoplay="3000" pager>
    <ion-slide *ngFor ="let number of [1,2,1,2]">
      <img src="./assets/images/{{number}}.jpg" alt="" width="200px" height="150px">
    </ion-slide>

  </ion-slides>
</ion-card>
<ion-grid>
  <ion-row>
    <ion-slides>
      <ion-slide *ngFor="let product of products"></ion-slide>
      <ion-card no-padding>
        <img [src]="product.featured_src">
        <h1>{{product.title}}</h1>
        <p>{{product.short_description}}</p>
      </ion-card>
    </ion-slides>
  </ion-row>
</ion-grid>
</ion-content>

Answer 1

Поскольку ваш ответ API является асинхронным, используйте оператор безопасной навигации,

 <img [src]="product?.featured_src">