ngFor无法显示来自json的数据

时间:2017-04-06 07:16:37

标签: json angular

我试图通过ngFor显示来自json的数据。但它不起作用。我使用spring boot创建自己的后端,并使用cors代理配置代理。我可以通过url localhost:4200 / api / user直接访问json。但我努力在angular2

中显示它

这是我的json

{
  "content" : [ {
    "id" : "45835708-f55a-40fb-878f-33b9c920e196",
    "fullName" : "Syahrul P Utomo",
    "userName" : "syahrul",
    "password" : "123456",
    "dob" : "1991-01-11",
    "email" : "irull@yahoo.com",
    "phone" : "0876757575"
  }, {
    "id" : "f52636f2-3af2-49d4-afc2-31bdd27cb8b1",
    "fullName" : "ririrsarizka",
    "userName" : "riris",
    "password" : "123456",
    "dob" : "1993-01-11",
    "email" : "riris@yahoo.com",
    "phone" : "0835352424"
  } ],
  "last" : true,
  "totalElements" : 2,
  "totalPages" : 1,
  "sort" : null,
  "first" : true,
  "numberOfElements" : 2,
  "size" : 20,
  "number" : 0
}

这是我的user.service.ts

import { Injectable }    from '@angular/core';

import { Headers, Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';

import { User } from './user.model';

@Injectable()
export class UserService {

  private serverUrl = 'api/user';
  constructor(private httpClient: Http) { }

  getDataUser(): Promise<User[]> {

    return this.httpClient.get(this.serverUrl)
    .toPromise()
    .then(hasil => hasil.json() as User[])
    .catch(this.handleError);
  }

  private handleError(error: any) : Promise<any> {
      //console.error(error.message || error);
      return Promise.reject(error.message || error);
  }

}

这是我的user.component.ts

import { Component, OnInit } from '@angular/core';

import { User } from '../user.model';
import { UserService } from '../user.service';

@Component({
  selector: 'app-view-user',
  templateUrl: './view-user.component.html',
  styleUrls: ['./view-user.component.css']
})
export class ViewUserComponent implements OnInit {

  daftarUser: User[];

  constructor(private userService: UserService) {
    userService.getDataUser()
    .then(hasil => this.daftarUser = hasil)
    .catch(this.handleError);
  }

  private handleError(errors: any): void {
      console.log("Terjadi error : "+errors);
  }

  ngOnInit() {
  }


}

这是我的user.component.html

<table class="table table-striped">
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let u of daftarUser">
          <td>{{u.fullName}}</td>
          <td>{{u.userName}}</td>
          <td>{{u.email}}</td>
        </tr>

      </tbody>
    </table>

这是控制台中的错误消息

ViewWrappedError
__zone_symbol__error
:
Error: Error in ./ViewUserComponent class ViewUserComponent - inline template:50:12 caused by: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. at ViewWrappedError.Error (native) at ViewWrappedError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:3270:33) at ViewWrappedError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:29033:16) at ViewWrappedError.WrappedError [as constructor] (http://localhost:4200/vendor.bundle.js:29098:16) at new ViewWrappedError (http://localhost:4200/vendor.bundle.js:58771:16) at DebugAppView._rethrowWithContext (http://localhost:4200/vendor.bundle.js:79856:23) at DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:79829:18) at DebugAppView.AppView.internalDetectChanges (http://localhost:4200/vendor.bundle.js:79616:18) at DebugAppView.View_ViewUserComponent_Host0.detectChangesInternal (/UserModule/ViewUserComponent/host.ngfactory.js:29:19) at DebugAppView.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:79631:14) at DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:79826:44) at ViewContainer.detectChangesInNestedViews (http://localhost:4200/vendor.bundle.js:79963:37) at DebugAppView.View_AppComponent0.detectChangesInternal (/AppModule/AppComponent/component.ngfactory.js:236:15) at DebugAppView.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:79631:14) at DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:79826:44)
message
:
"Error in ./ViewUserComponent class ViewUserComponent - inline template:50:12 caused by: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays."
originalStack
:
"Error: Error in ./ViewUserComponent class ViewUserComponent - inline template:50:12 caused by: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.↵    at ViewWrappedError.Error (native)↵    at 

任何人都可以提供帮助吗?

0 个答案:

没有答案