从Angular 2中的Hal + JSON对象解析信息

Question

我有一个spring-data-rest存储库，生成一个hal + json对象，我希望我的Angular 2前端能够接收和显示。

哈尔+ 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 
    } 
} 

我有，做一个GET请求到该API的服务。

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要正确的信息。但是这不能映射到用户[]，因为_embedded不是我用户模型的属性。我需要先对Hal + Json对象做些什么吗？

Answer 1

我需要先对Hal + Json对象做些什么吗？

难道不明显吗？只需提取在服务

findAllUsers(): Observable<Array<User>> { 
    return this.http.get('/api/users') 
    .map((response: Response) => response.json()) 
    .map((data: any) => { 
     return data._embedded.users as User[]; 
    }); 
} 

你有什么之前

.map((data: Array<User>) => { 
    return data; 
}); 

是不正确，因为你做的时候，居然是被传递给第二map数据的假设是用户的阵列中的数据这是整个HAL对象。将其更改为any可让您从中提取用户。