离子 - 找不到“对象”类型的不同支持对象“[对象对象]”答案

【问题标题】：Ionic - Cannot find a differ supporting object '[object Object]' of type 'object'离子 - 找不到“对象”类型的不同支持对象“[对象对象]”
【发布时间】：2018-02-10 02:58:38
【问题描述】：

我正在学习本教程：

http://blog.ionic.io/10-minutes-with-ionic-2-calling-an-api/

下面是我的系统信息（你可以看到我正在使用Ionic 3）：

$ ionic info

cli packages: (C:\Users\Hatuey\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.9.2
    ionic (Ionic CLI) : 3.9.2

local packages:

    @ionic/app-scripts : 2.1.4
    Ionic Framework    : ionic-angular 3.6.0

System:

    Node : v6.11.2
    npm  : 5.3.0
    OS   : Windows 10

然后，我做了以下项目：

$ mkdir stackoverflow-question
$ cd stackoverflow-question
$ git clone https://github.com/napolev/stackoverflow-question.git .
$ npm install
$ ionic serve

但我收到以下运行时错误：

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

如下图所示：

注意人们的数据在以下时间被正确检索：

https://github.com/napolev/stackoverflow-question/blob/master/src/pages/home/home.ts#L23

通过服务：PeopleService at：

https://github.com/napolev/stackoverflow-question/blob/master/src/providers/people-service/people-service.ts#L31

如果我注释掉以下行，那么我不会收到任何错误，但当然，检索用户信息并将其显示在屏幕上的功能还没有完成。

https://github.com/napolev/stackoverflow-question/blob/master/src/pages/home/home.ts#L19

可能我需要对文件内容进行修复：home.ts，即：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { PeopleService } from '../../providers/people-service/people-service';

@Component( {
    selector: 'page-home',
    templateUrl: 'home.html',
    providers: [PeopleService]
})
export class HomePage {

    public people: any;

    constructor(
        public navCtrl: NavController,
        public peopleService: PeopleService

    ) {
        this.loadPeople();
    }

    loadPeople() {
        this.peopleService.load()
            .then( data => {
                this.people = data;
                console.log( this.people );
            });
    }

}

这是home.html文件的内容：

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="home">
  <ion-list>
    <ion-item *ngFor="let person of people">
      <ion-avatar item-left>
        <img src="{{person.picture.thumbnail}}">
      </ion-avatar>
      <h2>{{person.name.first}} {{person.name.last}}</h2>
      <p>{{person.email}}</p>
    </ion-item>
  </ion-list>
</ion-content>

知道如何解决这个错误吗？

【问题讨论】：

分享你的 home.html 代码
好的，刚刚添加了文件内容：home.html

标签： angular typescript ionic-framework ionic2 ionic3

【解决方案1】：

您需要将people 设置为data.results。 data 是一个对象，而不是一个数组。

 this.peopleService.load()
            .then( data => {
                this.people = data.results;//here
                console.log( this.people );
            });

【讨论】：

谢谢，这行得通。无论如何要调试javascript代码，放置断点？

【解决方案2】：

NgFor 仅支持绑定到 Iterables，例如 Arrays。您需要将一个数组传递给 this.people 对象以对其进行迭代。

对您的方法进行以下更改：

loadPeople() {
    this.peopleService.load()
        .then( data => {
            this.people = data.results;
            console.log( this.people );
        });
}

【讨论】：