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

【问题标题】：HTML fail to load an array / Uncaught (in promise)HTML 无法加载数组/未捕获（承诺）
【发布时间】：2019-06-18 08:38:07
【问题描述】：

我使用 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>

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

是否有任何建议编辑。

【问题讨论】：

标签： javascript html typescript ionic-framework

【解决方案1】：

你必须迭代数组键

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

这里你没有迭代，在所有情况下如果你访问第一个元素然后 {{yourcontainerData[0].name}}

【讨论】：

你能用另一种方式解释一下吗

【解决方案2】：

尝试以这种方式声明：

categories: any[] = [];

【讨论】：

如果我以这种方式声明类别数组，父 ID 将是冲突，不会导致我进入主类别

【解决方案3】：

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

subcategories: any[] = [];

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

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

【讨论】：