Angular ISSUES使用HTTP检索数据，并使用ionic在视图中显示

我正在尝试使用ionic在应用程序中显示我的JSON数据

尝试输出数据时，我收到以下错误：

错误：“Uncaught（in promise）：错误：找不到类型为“object”的不同支持对象“[object object]”。NgFor仅支持绑定到数组等可重用对象

我的数据如下所示：

{
  "1": {
    "name": "John",
    "lastname": "Jonson",
    "email": "example@example.com",
    "image": ""
  },
  "5": {
    "name": "Peter",
    "lastname": "Parker",
    "email": "example@example.com",
    "image": ""
  },
  "8": {
    "name": "Joe",
    "lastname": "Lo",
    "email": "example@example.com",
    "image": ""
  },
}

<ion-list *ngFor="let user of users">
    <ion-item>{{ user.name}}</ion-item>
</ion-list>

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { Observable } from 'rxjs/Observable';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {

    users: Observable<any>;

    usersList = [];

    constructor(public navCtrl: NavController, public httpClient: HttpClient) {

        this.users = this.httpClient.get('http://example.com/api/user');

        this.users.subscribe(data => {
            this.usersList = data,
             console.log(data);
        });
    }
}

我的HTML代码：

{
  "1": {
    "name": "John",
    "lastname": "Jonson",
    "email": "example@example.com",
    "image": ""
  },
  "5": {
    "name": "Peter",
    "lastname": "Parker",
    "email": "example@example.com",
    "image": ""
  },
  "8": {
    "name": "Joe",
    "lastname": "Lo",
    "email": "example@example.com",
    "image": ""
  },
}

<ion-list *ngFor="let user of users">
    <ion-item>{{ user.name}}</ion-item>
</ion-list>

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { Observable } from 'rxjs/Observable';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {

    users: Observable<any>;

    usersList = [];

    constructor(public navCtrl: NavController, public httpClient: HttpClient) {

        this.users = this.httpClient.get('http://example.com/api/user');

        this.users.subscribe(data => {
            this.usersList = data,
             console.log(data);
        });
    }
}

{{user.name}

最后是js代码：

{
  "1": {
    "name": "John",
    "lastname": "Jonson",
    "email": "example@example.com",
    "image": ""
  },
  "5": {
    "name": "Peter",
    "lastname": "Parker",
    "email": "example@example.com",
    "image": ""
  },
  "8": {
    "name": "Joe",
    "lastname": "Lo",
    "email": "example@example.com",
    "image": ""
  },
}

<ion-list *ngFor="let user of users">
    <ion-item>{{ user.name}}</ion-item>
</ion-list>

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { Observable } from 'rxjs/Observable';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {

    users: Observable<any>;

    usersList = [];

    constructor(public navCtrl: NavController, public httpClient: HttpClient) {

        this.users = this.httpClient.get('http://example.com/api/user');

        this.users.subscribe(data => {
            this.usersList = data,
             console.log(data);
        });
    }
}

从'@angular/core'导入{Component}；
从'ionic angular'导入{NavController}；
从“rxjs/Observable”导入{Observable}；
从'@angular/common/http'导入{HttpClient}；
@组成部分({
选择器：“主页”，
templateUrl:'home.html'
})
导出类主页{
用户：可观察；
usersList=[]；
构造函数（公共navCtrl:NavController，公共httpClient:httpClient）{
this.users=this.httpClient.get（'http://example.com/api/user');
this.users.subscribe（数据=>{
this.usersList=数据，
控制台日志（数据）；
});
}
}

NgFor仅支持绑定到阵列等可重用项

所以让你的数据看起来像这样

const myData = [
  {
    "name": "John",
    "lastname": "Jonson",
    "email": "example@example.com",
    "image": ""
  },
  {
    "name": "Peter",
    "lastname": "Parker",
    "email": "example@example.com",
    "image": ""
  },
  {
    "name": "Joe",
    "lastname": "Lo",
    "email": "example@example.com",
    "image": ""
  },
]

---

有关数组的详细信息

您可以将数据转换为带有键的对象数组

Object.keys(yourData).forEach(value=>{ this.users.push({Key: value, User: data[value]})})

和模板如下所示：

<ion-list *ngFor="let user of users">
   <ion-item>{{ user.User.name}}</ion-item>
</ion-list>

{{user.user.name}

你的JSON结构不是JSON数组，这就是为什么你不能迭代它，所以我不能使用api，或者我需要将它转换为JSON吗？你可以将你的JSON转换为数组，首先你需要创建一个对象来处理对象数组。然后你需要从根对象（原始JSON）返回所有键。然后获取值（作为对象）每个键。然后将每个对象值（连同键ID）推送到您创建的对象。重新编写API，使其看起来像下面的示例，但我仍然收到相同的错误。更新您的帖子然后，您在代码中做了哪些更改？