未捕获（承诺）：TypeError：无法读取未定义的属性“getAsync”

Question

我对离子和角度非常陌生。我实际上正在学习一门我正在开发离子应用程序的课程。由于以下错误，我被卡住了，无法继续前进。请帮帮我。

提前致谢。

这是我的 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" no-padding="" pager>
      <ion-slide>
        <img src="../../assets/imgs/artificial-photography-119282-unsplash.jpg">
      </ion-slide>
      <ion-slide>
        <img src="../../assets/imgs/clark-street-mercantile-33931-unsplash.jpg">
      </ion-slide>
      <ion-slide>
        <img src="../../assets/imgs/freestocks-org-187367-unsplash.jpg">
      </ion-slide>
    </ion-slides>
  </ion-card>

<!--<ion-grid>
  <ion-row>
    <ion-slides>
      <ion-slide *ngFor="let product from 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-grid>
    <ion-row>
      <ion-slides #productslides>
        <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-list>
  <ion-item *ngFor="let product1 of moreProducts">
    <ion-thumbnail>
      <img [src]="product1.featured_src"/>
    </ion-thumbnail>
    <h2> {{ product1.title}}</h2>
    <p>
      <span [innerHTML]="product1.short_description"></span>
    </p>
  </ion-item>
</ion-list>

</ion-content>

这是我的 ts 文件

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

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


export class HomePage {

  wooCommerece: any;
  products: any[];
  moreProducts: any[];
  page :number;
  @ViewChild( 'productSlides') productSlides : Slides ;

  constructor(public navCtrl: NavController) {
    this.page =0;
    this.loadMoreProducts();
    //this.trasfer()

    this.wooCommerece = WC(
      {
        url: "http://test.institucion.net/dani/wordpress",
        consumerKey: "ck_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        consumerSecret: "cs_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
      });

    this.wooCommerece.getAsync("products").then((data) => {
      console.log(JSON.parse(data.body))

      this.products = (JSON.parse(data.body)).products;
    }, (error) => {
      console.log(error);
    })
  }

  ionViewDidLoad() {
    setInterval( () => {
      if (this.productSlides.getActiveIndex() == this.productSlides.length() - 1)
        this.productSlides.slideTo(0);
      this.productSlides.slideNext();
    },3000) }

  loadMoreProducts() {
    this.wooCommerece.getAsync("products").then((data) => {
      console.log(JSON.parse(data.body));
      this.moreProducts = (JSON.parse(data.body)).moreProducts;
    }, (error) => {
      console.log(error);

})
  }
}

这是我得到的错误

Error
Close
Runtime Error
Uncaught (in promise): TypeError: Cannot read property 'getAsync' of undefined TypeError: Cannot read property 'getAsync' of undefined at HomePage.webpackJsonp.270.HomePage.loadMoreProducts Stack
Error: Uncaught (in promise): TypeError: Cannot read property 'getAsync' of undefined
TypeError: Cannot read property 'getAsync' of undefined
    at HomePage.webpackJsonp.270.HomePage.loadMoreProducts (http://localhost:8100/build/main.js:135:27)
    at new HomePage (http://localhost:8100/build/main.js:111:14)
    at createClass (http://localhost:8100/build/vendor.js:12517:20)
    at createDirectiveInstance (http://localhost:8100/build/vendor.js:12364:37)
    at createViewNodes (http://localhost:8100/build/vendor.js:13802:53)
    at createRootView (http://localhost:8100/build/vendor.js:13692:5)
    at callWithDebugContext (http://localhost:8100/build/vendor.js:15093:42)
    at Object.debugCreateRootView [as createRootView] Ionic Framework: 3.9.2
Ionic App Scripts: 3.1.8
Angular Core: 5.0.3
Angular Compiler CLI: 5.0.3
Node: 8.9.4
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Mobile Safari/537.36

Answer 1

所有组件都应该导入到 app.modules.ts 文件中，例如

import { HomePage } from '../pages/home/home';
@NgModule({
  declarations: [
    MyApp,
    HomePage,
]})

另外，Img 标签应该是这样的：

<img src="assets/imgs/artificial-photography-119282-unsplash.jpg">