HTML无法加载数组/未被捕获（承诺）

Question

我使用woocommerce api从ionic3的父类别中加载新页面上的子类别。 我确实可以获取子类别，但是我的问题是，当我尝试显示子类别时，出现如下屏幕所示的错误：

这是我的sub.ts文件代码：

import { Component, NgZone } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController } from 'ionic-angular';
import * as WC from 'woocommerce-api';


@IonicPage()
@Component({
  selector: 'page-subcategories',
  templateUrl: 'subcategories.html',
})
export class SubcategoriesPage {
  WooCommerce: any;
  page: number;
  categories: any = [];

  constructor(public navCtrl: NavController, public navParams: NavParams, public toastCtrl: ToastController, public ngZone: NgZone) {
    this.categories = this.navParams.get('category');

    this.WooCommerce = WC({
      url: "http:///",
      consumerKey: "///",
      consumerSecret:"///",
      wpAPI: true, // Enable the WP REST API integration
      queryStringAuth: true,
      verifySsl: true,
      version: 'wc/v3' 
    });

    this.WooCommerce.getAsync("products/categories?parent=" + this.categories.id).then((data) => {
      console.log(JSON.parse(data.body));
      this.ngZone.run(() => {
       this.categories = JSON.parse(data.body);
     })


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

而我的sub.HTML文件代码是：

<ion-content padding>

  <ion-list>
    <ion-item *ngFor="let sub of categories">
      <ion-icon name="arrow-forward" item-left large></ion-icon>
      <h2> {‌{ sub.name }} </h2>
    </ion-item>
 </ion-list>

</ion-content>

当我选择父类别来显示子类别时，我得到了一个子类别数组，如下面的屏幕所示：

有什么建议编辑。

Answer 1

您必须迭代数组键

@foreach (@yourcontainerData as $k=>$data)
{{$data.name}}
@endforeach

在这里，您无需进行迭代，在所有情况下，如果您都尝试访问第一个元素，那么{{yourcontainerData [0] .name}}

Answer 2

尝试以这种方式声明：

categories: any[] = [];

Answer 3

我通过添加解决了我的问题

subcategories: any[] = [];

然后将我的类别加载到子类别中

 this.ngZone.run(() => {
        this.categories = JSON.parse(data.body);
         this.subcategories = this.categories
        console.log(this.subcategories );
     })