Angular 4正確的方法來投射HTTP響應

Question

我已經在Angular 4中創建了一個服務，並使用以下代碼通過REST / JSON（Angular的新功能）獲取數據：

接口

export interface IItem {
    Id: number;
    Title: string;
}

服務

import { IItem } from './item';
import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/map';

@Injectable()
export class ItemTest {

    constructor(private _http: HttpClient) {}

    getItems(): Observable<IItem[]> {
        return this._http.get<IItem[]>('url')
            .do(data => {
                console.log(data);
            })
    }
}

如果響應采用這種格式，則將HTTP強制轉換為IITem

[
    {
        "Id": 53,
        "Title": "Test Document 4.docx"
    },
    {
        "Id": 55,
        "Title": "Test Document 2.docx"
    }
]

但是來自服務器的實際響應看起來像這樣，並且強制轉換不起作用。 將響應的“結果”部分轉換為IItems數組的最佳方法是什么？

{
    "d": {
        "results": [
            {
                "Id": 53,
                "Title": "Test Document 4.docx"
            },
            {
                "Id": 55,
                "Title": "Test Document 2.docx"
            }
        ]
    }
}

Answer 1

您將要使用地圖運算符：

@Injectable()
export class ItemTest {

    constructor(private _http: HttpClient) {}

    getItems(): Observable<IItem[]> {
        return this._http.get('url').map((data) => data['d']['results'])              
            .do(data => {
                console.log(data);
            })
    }
}

Answer 2

get的特定類型應描述您期望接收的實際響應JSON的形狀。 然后，編譯器實際上可以通過告訴您是否正在訪問並返回正確的內容來為您提供幫助 。 在您的情況下：

getItems(): Observable<IItem[]> {
    return this._http.get<{ d: { results: IItem[] } }>('url')
        .map(response => response.d.results)
        .do(data => {
            console.log(data);
        }):
}

需要注意的是這一切都不是鑄造響應數據，只是描述它。

---

至於您的其他建議：

.get<IItem[]>(...)
.map((data) => data['d']['results']) 

如果您將錯誤地聲明響應的類型，然后進行不安全的屬性訪問，結果編譯器只能假定是any ，那么您也可能根本不使用類型。 當編譯器告訴您正在訪問錯誤的屬性時，不要僅僅忽略它。

Answer 3

您可能需要運行一些映射實用程序

http.get(url)
.map(response => response.json())
.map(response => response.d.results)
.map(results => results.map(item => return Object.create(IItem, item))