首页 > 解决方案 > HTML 无法加载数组/未捕获(承诺)

问题描述

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

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

有没有建议编辑。

标签: javascripthtmltypescriptionic-framework

解决方案


您必须迭代数组键

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

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


推荐阅读