Angular 4.4來自REST服務的日期反序列化

Question

我正在使用Angular 4的新HttpModule從REST服務中檢索數據。問題是，數據包含Date類型的屬性。我見過this thread但是當我嘗試在線程建議的解決方案，我得到以下錯誤：res.json is not a function

這裏是我的代碼：

getMarkets(): Observable<Christmasmarket[]> { 
    let markets: Christmasmarket[]; 
    return this.http.get(this.apiUrl).map(this.extractData); 

    } 

    private extractData(res: Response) { 

    let body = res.json().data; 
    console.log(body); 
    body.forEach((d) => { 
     d.start = new Date(d.start) 
     d.end = new Date(d.end); 
    }); 
    return body.data || {}; 
    } 

這裏是從服務中的數據：

[ 
    { 
    "id": 1, 
    "name": "mein markt1", 
    "start": "2017-11-14T23:00:47.838+0000", 
    "end": "2017-12-14T23:00:47.838+0000", 
    "postalCode": "1100", 
    "city": "wien", 
    "address": "test", 
    "rating": 4.56, 
    "ratingPrice": 1.2, 
    "numberOfRatings": 10, 
    "latLng": { 
     "latitude": 48.208982, 
     "longitude": 16.373213 
    }, 
    "openingHours": [ 
     { 
     "open": true, 
     "start": 600, 
     "end": 1200, 
     "dayOfWeek": 0 
     }, 
     { 
     "open": true, 
     "start": 660, 
     "end": 1200, 
     "dayOfWeek": 1 
     }, 
     { 
     "open": true, 
     "start": 690, 
     "end": 1200, 
     "dayOfWeek": 2 
     }, 
     { 
     "open": true, 
     "start": 600, 
     "end": 1200, 
     "dayOfWeek": 3 
     }, 
     { 
     "open": true, 
     "start": 600, 
     "end": 1200, 
     "dayOfWeek": 4 
     }, 
     { 
     "open": true, 
     "start": 600, 
     "end": 1200, 
     "dayOfWeek": 5 
     }, 
     { 
     "open": true, 
     "start": 600, 
     "end": 1200, 
     "dayOfWeek": 6 
     } 
    ], 
    "extraordinaryOpeningHours": [ 

    ] 
    } 
] 

Answer 1

您可能正在使用新的HttpClientModule，而不是舊的HttpModule。與HttpClient，從JSON的反序列化是自動完成的，所以沒有response.json()方法。

更多關於它的角文檔：https://angular.io/guide/http

還要注意，然後用HttpClient，您可以指定響應的接口，所以它會自動映射爲你：

interface ItemsResponse { 
    results: string[]; 
} 

http.get<ItemsResponse>('/api/items').subscribe(data => { 
    // data is now an instance of type ItemsResponse, so you can do this: 
    this.results = data.results; 
}); 

這應該也行與Date類型我猜。