Angular 4 HttpClient數據映射

Question

我有一個API，該API返回需要轉換為javascript日期的ISO日期。 我正在使用自動執行映射的HTTPClient模塊，但似乎它沒有轉換接收到的數據。

我知道如果我使用http模塊執行此操作，但我想使用HTTPClient。

我的代碼如下。

   export class Product{
     datetime: string;
     qty: number;
     constructor(date: string, hr: number )  {
        this.datetime = new Date(Date.parse(date));
        this.heartrate = hr;
       }
     }



    @Injectable()
    export class BandHeartRate {

        private Url  = 'http://192.168.1.1:6000';
        constructor(private http: HttpClient) {}

    public getProduct(): Observable<Product[]> {

            return this.http.get<Product[]>(`${this.Url}/web/api/v2/product`, 
    {headers: this.getHeader()});

        }

        private getHeader() {
            const header = new HttpHeaders();
            header.append('Accept' , 'application/json');
            return header;
        }
    }
    }

Answer 1

您的http調用的響應將是一個JSON對象。 JSON本身不表示日期，因此您的日期將在結果中表示為字符串。 您已經正確地認識到需要將這些字符串手動轉換為日期。

您的代碼大致正確，但是您假設您可以將返回的JSON轉換為Product實例。 那不管用。 如果Product是一個接口而不是一個類，那么它將起作用（要創建一個類的實例，您需要調用其構造函數，而您的代碼不在任何地方這樣做）。

一種快速的解決方法是如下更改您的調用代碼：

this.http.get(`${this.Url}/web/api/v2/product`, 
    {headers: this.getHeader()})
.map(productList => productList.map(productJson => new Product(productJson)));

這將使用接收到的JSON構造Product實例（第一個map表示您要轉換Observable的結果，第二個map將JSON數組中的每個項目從JSON轉換為Products）。

Product構造函數將接收單個對象的JSON，因此您也需要對其進行一些修改：

export class Product {
    date: Date
    hr: number

    constructor({dateAsString, hr})  {
        this.date = new Date(dateAsString);
        this.hr = hr
    }
}

如果您想了解({dateAsString, hr})語法，請使用Google“函數參數({dateAsString, hr}) ”。