尝试区分“[object Object]”时出错。只允许数组和可迭代对象。（离子 3）

Question

我正在做一个项目，但我一直收到错误 Error trying to diff '[object Object]'. Only arrays and iterables are allowed 我查找了错误，有两种方法可以做到，更改传入数据（不可能）或 "transform the object in my component" .我需要做后者，但我找不到任何方法，因为我只是一个学生。下面是一些相关代码：

characters.ts

     apiUrl = 'https://swapi.co/api/people';

     getUsers() {
     return new Promise(resolve => {
     this.http.get(this.apiUrl)
     .subscribe(data => {
      resolve(data);
     }, err => {
     console.log(err);
    });
   });

home.ts

  users: any= [];

  constructor(public navCtrl: NavController, public restProvider: 
  CharactorsProvider) {
  this.getUsers();
 }


  getUsers() {
  this.restProvider.getUsers()
  .then(data => {
  this.users = data;
  console.log(this.users);
 });
 }

home.html

 <ion-list>
 <ion-item *ngFor="let user of users">
  <p>{{charactor.results}}</p>
 </ion-item>
 </ion-list>
</ion-content>

请帮助更改代码，这将是一个巨大的帮助。我是 Ionic 的新手，才接触了几周，就对它有了基本的了解。

编辑：代码不在框中。编辑 2：API 我正在使用 https://swapi.co/api/people/

Answer 1

好吧，根据您上面发布的 JSON，看起来您使用的是对象而不是数组。

正如上面所述的错误"Error trying to diff '[object Object]'. Only arrays and iterables are allowed" 你需要数组来迭代使用 ngFor.

要么更改您的 API 以将响应作为数组发送，要么将对象推送到数组。

你在 ngFor 变量中也有问题

<ion-item *ngFor="let user of users">
  <p>{{user.name}}</p> //access each user object from array
 </ion-item>

EDIT

当我查看响应时，实际上您应该从数组形式的响应中访问结果属性。

this.http.get('https://swapi.co/api/people/')
      .subscribe((res: Response) => {
        this.users = res.json().results; 
      }, error => {
        console.log(error);
        this.errorFromSubscribe = error;
});

HERE IS A WORKING STACKBLITZ

尝试区分“[object Object]”时出错。只允许数组和可迭代对象。（离子 3）

Error trying to diff '[object Object]'. Only arrays and iterables are allowed. (Ionic 3)

html

api

ngfor

ionic3

angular

尝试区分“[object Object]”时出错。只允许数组和可迭代对象。 （离子 3）

Error trying to diff '[object Object]'. Only arrays and iterables are allowed. (Ionic 3)

html

api

ngfor

ionic3

angular

尝试区分“[object Object]”时出错。只允许数组和可迭代对象。（离子 3）