TypeError:无法读取未定义的属性“featured_src”

Question

当我写

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

我得到了一系列具有它们的值的产品，但是当我想在我的离子应用程序中使用它时，我会得到以下错误

HomePage.html:10 ERROR 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">