离子 - 找不到不同的支撑物体＆＃39; [物体对象]＆＃39;类型＆＃39;对象＆＃39;

Question

我遵循本教程：

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>

有关如何解决此错误的想法吗？

Answer 1

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

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

Answer 2

NgFor仅支持绑定到诸如Arrays之类的Iterables。您需要将一个数组传递给this.people对象以迭代它。

在您的方法中进行以下更改：

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