我有一个使用spring-data-rest创建的仓库,它会生成一个hal+json对象,我希望我的Angular 2前端可以接收并显示它。
Hal+Json对象:
{
"_embedded" : {
"users" : [ {
"name" : "Bob",
"_links" : {
"self" : {
"href" : "http://localhost:4200/api/users/1"
},
"user" : {
"href" : "http://localhost:4200/api/users/1"
}
}
}, {
"name" : "Joe",
"_links" : {
"self" : {
"href" : "http://localhost:4200/api/users/2"
},
"user" : {
"href" : "http://localhost:4200/api/users/2"
}
}
} ]
},
"_links" : {
"self" : {
"href" : "http://localhost:4200/api/users"
},
"profile" : {
"href" : "http://localhost:4200/api/profile/users"
},
"search" : {
"href" : "http://localhost:4200/api/users/search"
}
},
"page" : {
"size" : 20,
"totalElements" : 2,
"totalPages" : 1,
"number" : 0
}
}
我有一个服务,它向此API发送get请求。
user.service.ts:
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { User } from './user.model';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map'
@Injectable()
export class UserService {
constructor(private http: Http) {
}
findAllUsers(): Observable<Array<User>> {
return this.http.get('/api/users')
.map((response: Response) => response.json())
.map((data: Array<User>) => {
return data;
});
}
}
然后我的users.component从服务中调用findAllUsers方法。
users.component.ts
import { Component, OnInit } from '@angular/core';
import { User } from './user.model';
import { UserService } from './user.service';
@Component({
selector: 'app-users',
providers: [UserService],
templateUrl: './users.component.html',
styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
users: User[];
constructor(private userService: UserService) {
}
ngOnInit(): void {
this.userService.findAllUsers().subscribe((data: Array<User>) => {
this.users = data;
});
}
}
最后,users.component.html 文件内容如下:
<h4>Users:</h4>
<div *ngFor="let user of users">
{{user}}
</div>
在我的视图中,我遇到了一个错误,提示:
Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
我不确定该如何解决。如果我在服务中返回
data
之前尝试使用调试器,则可以看到我的hal+json对象= data
,并且我可以从data._embedded_users
中获取所需的正确信息。但是这不能映射到User[],因为_embedded
不是我的用户模型的属性。我需要先对Hal+Json对象进行某些处理吗?
.map()
操作符中删除了_links
字段。 - Lamberto Basti