使用HttpClient我得到：错误：无法找到'object'类型的不同支持对象'[object Object]'

时间：2018-05-17 14:29:16

标签： json angular api ionic-framework

我正在尝试通过json显示数据，我正在关注本教程https://www.djamware.com/post/59924f9080aca768e4d2b12e/ionic-3-consuming-rest-api-using-new-angular-43-httpclient并使用https://jsonplaceholder.typicode.com/users它完美地显示了数据但是 { nombre：“Víctor”， Apellido：“罗伯斯”， cedula：“18617014”， fecha_nacimiento：“23-08-1987”， profesion：“ing en informatica” }

我明白了，错误：无法找到'object'类型的不同支持对象'[object Object]'。 NgFor仅支持绑定到Iterables，例如Arrays。

这是我的提供者/ rest.ts 

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

/*
  Generated class for the RestProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class RestProvider {

  apiUrl = 'http://192.168.0.106:8000/api';

  constructor(public http: HttpClient) {
    console.log('Hello RestProvider Provider');
  }

  getUsers() {
    return new Promise(resolve => {
      this.http.get(this.apiUrl+'/users').subscribe(response => {
        resolve(response);
      }, err => {
        console.log(err);
      });
    });
  }

  addUser(data) {
    return new Promise((resolve, reject) => {
      this.http.post(this.apiUrl+'/users', JSON.stringify(data))
        .subscribe(res => {
          resolve(res);
        }, (err) => {
          reject(err);
        });
    });
  }

}

这是我的show-posts.ts 

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, MenuController } from 'ionic-angular';
import { RestProvider } from '../../providers/rest/rest';


/**
 * Generated class for the ShowPostsPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-show-posts',
  templateUrl: 'show-posts.html',
})
export class ShowPostsPage {
  users: any;
  constructor(public navCtrl: NavController, public navParams: NavParams, public menuCtrl: MenuController,
   public restProvider: RestProvider) {
    // Cerrar menu cuando se ingrese a ClassesPage
    this.menuCtrl.close();  

    this.getUsers();
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ShowPostsPage');
  }

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

}

这是我的show-posts.html 

<!--
  Generated template for the ShowPostsPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>Usuarios</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <ion-list inset>
    <ion-item *ngFor="let user of users">
      <h2>{{user.nombre}}</h2>
      <p>{{user.cedula}}</p>
      <!-- <p>{{Usuarios.cedula}}</p>
      <p>{{Usuarios.fecha_nacimiento}}</p>
      <p>{{Usuarios.profesion}}</p> -->
    </ion-item>
  </ion-list>
</ion-content>

*忽略名称，我知道我正在显示用户，没有帖子，但这只是一个尝试。我对api很新，很好用所有这些

我通过控制台日志获取数据

{nombre: "Víctor", Apellido: "Robles", cedula: "18617014", fecha_nacimiento: "23-08-1987", profesion: "ing en informatica"}Apellido: "Robles"cedula: "18617014"fecha_nacimiento: "23-08-1987"nombre: "Víctor"profesion: "ing en informatica"__proto__: Object
ShowPostsPage.html:18 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
    at NgForOf.ngOnChanges (VM1115 vendor.js:39917)
    at checkAndUpdateDirectiveInline (VM1115 vendor.js:12781)
    at checkAndUpdateNodeInline (VM1115 vendor.js:14309)
    at checkAndUpdateNode (VM1115 vendor.js:14252)
    at debugCheckAndUpdateNode (VM1115 vendor.js:15145)
    at debugCheckDirectivesFn (VM1115 vendor.js:15086)
    at Object.eval [as updateDirectives] (VM1224 ShowPostsPage.ngfactory.js:58)
    at Object.debugUpdateDirectives [as updateDirectives] (VM1115 vendor.js:15071)
    at checkAndUpdateView (VM1115 vendor.js:14218)
    at callViewAction (VM1115 vendor.js:14569)
View_ShowPostsPage_0 @ ShowPostsPage.html:18
proxyClass @ compiler.js:14659
DebugContext_.logError @ core.js:15038
ErrorHandler.handleError @ core.js:1510
IonicErrorHandler.handleError @ ionic-error-handler.js:61
(anonymous) @ core.js:5925
t.invoke @ polyfills.js:3
r.run @ polyfills.js:3
NgZone.runOutsideAngular @ core.js:4708
ApplicationRef.tick @ core.js:5925
(anonymous) @ core.js:5751
t.invoke @ polyfills.js:3
onInvoke @ core.js:4760
t.invoke @ polyfills.js:3
r.run @ polyfills.js:3
NgZone.run @ core.js:4577
next @ core.js:5751
schedulerFn @ core.js:4342
SafeSubscriber.__tryOrUnsub @ Subscriber.js:242
SafeSubscriber.next @ Subscriber.js:189
Subscriber._next @ Subscriber.js:129
Subscriber.next @ Subscriber.js:93
Subject.next @ Subject.js:55
EventEmitter.emit @ core.js:4322
checkStable @ core.js:4725
onHasTask @ core.js:4773
t.hasTask @ polyfills.js:3
t._updateTaskCount @ polyfills.js:3
r._updateTaskCount @ polyfills.js:3
r.runTask @ polyfills.js:3
o @ polyfills.js:3
e.invokeTask @ polyfills.js:3
p @ polyfills.js:2
v @ polyfills.js:2
error (async)
O @ polyfills.js:2
t.scheduleTask @ polyfills.js:3
onScheduleTask @ polyfills.js:3
t.scheduleTask @ polyfills.js:3
r.scheduleTask @ polyfills.js:3
r.scheduleEventTask @ polyfills.js:3
(anonymous) @ polyfills.js:2
(anonymous) @ http.js:2353
Observable._trySubscribe @ Observable.js:172
Observable.subscribe @ Observable.js:160
subscribeToResult @ subscribeToResult.js:23
MergeMapSubscriber._innerSub @ mergeMap.js:132
MergeMapSubscriber._tryNext @ mergeMap.js:129
MergeMapSubscriber._next @ mergeMap.js:112
Subscriber.next @ Subscriber.js:93
ScalarObservable._subscribe @ ScalarObservable.js:49
Observable._trySubscribe @ Observable.js:172
Observable.subscribe @ Observable.js:160
MergeMapOperator.call @ mergeMap.js:87
Observable.subscribe @ Observable.js:157
FilterOperator.call @ filter.js:60
Observable.subscribe @ Observable.js:157
MapOperator.call @ map.js:56
Observable.subscribe @ Observable.js:157
(anonymous) @ rest.ts:23
t @ polyfills.js:3
webpackJsonp.165.RestProvider.getUsers @ rest.ts:22
webpackJsonp.108.ShowPostsPage.getUsers @ show-posts.ts:51
ShowPostsPage @ show-posts.ts:43
createClass @ core.js:12491
createDirectiveInstance @ core.js:12326
createViewNodes @ core.js:13784
createRootView @ core.js:13673
callWithDebugContext @ core.js:15098
debugCreateRootView @ core.js:14381
ComponentFactory_.create @ core.js:11278
ComponentFactoryBoundToModule.create @ core.js:4030
NavControllerBase._viewInit @ nav-controller-base.js:441
(anonymous) @ nav-controller-base.js:254
t.invoke @ polyfills.js:3
onInvoke @ core.js:4760
t.invoke @ polyfills.js:3
r.run @ polyfills.js:3
(anonymous) @ polyfills.js:3
t.invokeTask @ polyfills.js:3
onInvokeTask @ core.js:4751
t.invokeTask @ polyfills.js:3
r.runTask @ polyfills.js:3
o @ polyfills.js:3
e.invokeTask @ polyfills.js:3
p @ polyfills.js:2
v @ polyfills.js:2
ShowPostsPage.html:18 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 20, nodeDef: {…}, elDef: {…}, elView: {…}}

1 个答案:

答案 0 :(得分：0)

从您的日志中看，通过的数据看起来只是一个用户(victor robles)。这是主要问题。 不过，我建议您将用户属性声明为any[]，而不仅仅是any。然后将您的单个用户包起来，例如data []，如果您想要解决它。 

this.users = [data];

然后，您还没有从您的服务中获取用户列表。它应该是一个集合（数组），如果它是一个用户列表，而不是一个对象。

相关问题
最新问题