從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可讓您從中提取用戶。