我试图通过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
任何人都可以提供帮助吗?