时间戳

首页 > 解决方案 > 尝试区分“[object Object]”时出错。只允许使用数组和可迭代对象。（离子 3）

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

问题描述

我正在做一个项目，但我不断收到错误Error trying to diff '[object Object]'. Only arrays and iterables are allowed我查找了错误，有两种方法可以做到这一点，更改传入数据（不可能）或“转换我的组件中的对象”。我需要做后者，但我找不到任何方法，因为我只是一个学生。以下是一些相关代码：

字符.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);
    });
   });

主页.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);
 });
 }

主页.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/

标签： htmlangularapiionic3ngfor

解决方案

那么根据您在上面发布的 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

当我查看响应时，实际上您应该从响应中访问 results 属性，该响应是一个数组。

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

推荐阅读