Ionic调用WooCommerce API报TypeError:无法读取undefined的'featured_src'属性

嘿，我来帮你搞定这个错误！你遇到的 TypeError: Cannot read property 'featured_src' of undefined 主要是两个原因导致的，咱们一步步来修复：

1. 异步数据加载引发的初始渲染问题 #

你的产品数据是通过WooCommerce API异步获取的，组件刚初始化时products数组还没被赋值（初始是undefined），但模板已经迫不及待地尝试渲染product.featured_src了，这时候product自然是undefined，直接抛出错误。

2. HTML模板的结构错误 #

看你的home.html代码，ion-card放在了ion-slide的*ngFor循环外面！这意味着循环生成的slide都是空的，而外面的card试图访问一个根本不存在的product变量（product只有在循环内部才是有效的局部变量），这也是触发错误的关键。

具体修复步骤： #

第一步：修复HTML模板结构

把ion-card移到ion-slide内部，确保每个slide对应一个产品；同时给产品属性加上安全导航操作符（?.），避免异步加载完成前的报错：

<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-card放入slide循环内部，用安全导航符处理异步加载 -->
        <ion-slide *ngFor="let product of products">
          <ion-card no-padding>
            <img [src]="product?.featured_src">
            <h1>{{product?.title}}</h1>
            <p>{{product?.short_description}}</p>
          </ion-card>
        </ion-slide>
      </ion-slides>
    </ion-row>
  </ion-grid>
</ion-content>

第二步：初始化products数组

在home.ts里，把products初始化为空数组，这样API返回数据前，模板循环的是一个空数组，不会出现undefined的情况：

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;
  // 初始化为空数组，避免初始值为undefined
  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)
    })
  }
}

这样修改后，既解决了异步加载时的初始渲染错误，也修复了模板结构导致的变量作用域问题，应该就能正常显示产品信息了。

内容的提问来源于stack exchange，提问作者Bojan Mihajlovic