无法在 Ionic 中将数组分配给 ngFor，显示错误答案

【问题标题】：Not able to assign Array to ngFor In Ionic, Showing Error无法在 Ionic 中将数组分配给 ngFor，显示错误
【发布时间】：2019-05-31 00:06:06
【问题描述】：

我正在使用 API 获取产品类别，但问题是，我将类别作为对象获取，但无法将它们定义为数组。要 *ngFor 在 Ionic 中工作，值应该在数组中。非常感谢任何帮助。

这是我的product.html：

<ion-content no-padding>
  <ion-grid class="myproducts">
    <h1 class="myph11">Our Product Categories</h1>
    <ion-row align-items-center *ngFor="let pcat of categories?.msg?.cat[0]">
      <ion-col (click)="getproducts(1)">
        <img class="imgsection12" src="assets/imgs/dark-honey2.jpg" />
        <h4 class="mynewph22">{{pcat.category_name}}</h4>
      </ion-col>
      <ion-col>
        <img class="imgsection12" src="assets/imgs/eucalyptus-honey2.jpg" />
        <h4 class="mynewph22">Eucalyptus Honey</h4>
      </ion-col>
    </ion-row>
    <ion-row align-items-center>
        <ion-col>
          <img class="imgsection12" src="assets/imgs/light-honey3-2.jpg" />
          <h4 class="mynewph22">Light Forest Honey {{categories?.msg?.cat[0].category_name}}</h4>
        </ion-col>
        <ion-col>
            <img class="imgsection12" src="assets/imgs/organic-honey2-2.jpg" />
            <h4 class="mynewph22">Organic Honey</h4>
        </ion-col>
    </ion-row>
</ion-grid>
</ion-content>

错误：找不到“object”类型的不同支持对象“[object Object]”。 NgFor 仅支持绑定到 Iterables，例如 Arrays。这显示类别 {{categories?.msg?.cat[0].category_name}} 但 *ngFor 显示错误。

这是我的 product.ts：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { RestapiProvider } from '../../providers/restapi/restapi';
import { ProductdetailsPage } from './../productdetails/productdetails';
import { CartPage } from './../cart/cart';

@IonicPage()
@Component({
  selector: 'page-product',
  templateUrl: 'product.html',
})
export class ProductPage {
  users: any;
  categories: any = [];
  constructor(public navCtrl: NavController, public navParams: NavParams, public restProvider: RestapiProvider) {
  this.getcategories();
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ProductPage');
  }

  getcategories()
  {
    this.restProvider.getproductcategories()
      .then(data => {
      this.categories = data;
      console.log(this.categories);
  });

这是我的服务：restapi.ts：

apiUrl3 = 'http://beegoodhoney.in/HoneyApi/category';

getproductcategories()
  {
    return new Promise(resolve => {

      var headers = new HttpHeaders();
      headers.append('Access-Control-Allow-Origin' , '*');
      headers.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
      headers.append('Accept','application/json');
      headers.append('content-type','application/json');

    this.http.get(this.apiUrl3, {headers: headers}).subscribe((data: Response) => {
      resolve(data);},
    err => {
    console.log(err);
    });
    });
  }

问题是，我将类别作为对象获取，但我希望它作为数组。非常感谢任何帮助。

【问题讨论】：

当您说“将类别作为对象获取”时，该对象是什么样的？
@ColbyHunter。当我使用 *ngFor 时，它显示错误。错误：找不到“object”类型的不同支持对象“[object Object]”。 NgFor 只支持绑定到 Arrays 等 Iterables。

标签： html angular ionic-framework ionic3

【解决方案1】：

this.restProvider.getproductcategories()
      .then(data => {
      this.categories = data.msg.cat; <-- will do the trick
      console.log(this.categories);

然后在*ngFor你可以使用*ngFor="let category of this.categories"

如果你美化json，你可以看到response是一个具有2个属性的对象：status和msg，其中msg包含cat对象数组

【讨论】：

使用 data.msg.cat，显示错误。我们可以将其与类别一起使用。
我们如何使用data.msg.cat？我们可以将它与类别一起使用。
是的，我明白了。感谢您的回答。我已经做到了。 this.categories = 数据； this.pcatg = this.categories.msg.cat;
感谢您的回答。