Góc 2 Ngày deserialization

Question

Tôi có ứng dụng Angular 2. Dịch vụ yêu cầu dữ liệu từ api trả về kết quả như sau:

{ 
    "data":[ 
     {"id":1,"timestamp":"2016-04-17T19:52:53.4510935+01:00","sourceDatabaseServer":"127.0.0.1","sourceDatabaseName":"Database1","targetDatabaseServer":"192.168.99.101","targetDatabaseName":"Database2"}, 
     {"id":2,"timestamp":"2016-04-17T19:52:53.4510935+01:00","sourceDatabaseServer":"127.0.0.2","sourceDatabaseName":"Database3","targetDatabaseServer":"192.168.99.102","targetDatabaseName":"Database4"}, 
     {"id":3,"timestamp":"2016-04-17T19:52:53.4510935+01:00","sourceDatabaseServer":"127.0.0.3","sourceDatabaseName":"Database5","targetDatabaseServer":"192.168.99.103","targetDatabaseName":"Database6"} 
    ] 
} 

Dịch vụ Angular 2 của tôi trông như thế này (Tôi đã cắt lỗi xử lý ngắn gọn khi đang trên đường hạnh phúc) :

getList() : Observable<SomeModel[]> { 
    return this._http.get(this._getListUrl).map(this.extractData); 
} 

private extractData(res: Response) { 
    return res.json().data || {}; 
} 

và thành phần của tôi như thế này:

results: SomeModel[]; 
errorMessage: string; 
ngOnInit() { 
    this._someService.getList() 
     .subscribe(
     results => this.results = results, 
     error => this.errorMessage = <any>error); 
} 

và mô hình của tôi như thế này:

export class SomeModel { 

    constructor(
     public id: number, 
     public timestamp: Date, 
     public sourceDatabaseServer: string, 
     public sourceDatabaseName: string, 
     public targetDatabaseServer: string, 
     public targetDatabaseName: string 
    ) { } 
} 

Mọi thứ trông giống như nó đã làm việc tuy nhiên khi tôi cố gắng để hiển thị dấu thời gian bằng cách sử dụng DatePipe như vậy {{item.timestamp | date:'short'}} ứng dụng thổi lên với thông báo lỗi sau:

Invalid argument '2016-04-17T19:40:38.2424240+01:00' for pipe 'DatePipe' in [{{result.timestamp | date:'short'}} 

Sau một số cuộc điều tra tôi tin rằng dấu thời gian không phải là thực sự đang được chuyển đổi thành loại Date nhưng thay vì chỉ được đặt là string. Tôi đoán điều này là do loại Date không được biết tại thời điểm Response.json() được gọi? hoặc tôi thiếu cái gì khác hoàn toàn? Có một sửa chữa hoặc làm việc xung quanh cho điều này?

Answer 1

tôi sẽ lập bản đồ các lĩnh vực chuỗi đến một ngày một:

getList() : Observable<SomeModel[]> { 
    return this._http.get(this._getListUrl).map(this.extractData); 
} 

private extractData(res: Response) { 
    var data = res.json().data || []; 
    data.forEach((d) => { 
    d.timestamp = new Date(d.timestamp); 
    }); 
    return data; 
} 

Answer 2

Các ống date chỉ chấp nhận Date giá trị không giá trị chuỗi.

Xem How to get Date object from json Response in typescript để biết cách chuyển đổi ngày trong JSON.

Hoặc bạn có thể tạo riêng chuỗi-to-date ống chuyển đổi của bạn

@Pipe({name: 'toDate'}) 
export class StringToDate implements PipeTransform { 
    transform(value, [exponent]) : number { 
    if(value) { 
     return new Date(value); 
    } 
    } 
} 

và sau đó sử dụng nó như

{{item.timestamp |toDate | date:'short'}} 

Gợi ý: đừng quên để thêm các đường ống để pipes: [StringToDate] trên @Component(...) decorater nơi bạn muốn sử dụng.

cũng

• https://github.com/angular/angular/pull/8038
• https://github.com/angular/angular/pull/7794

Answer 3

Xem JSON không cung cấp bất kỳ đặc điểm kỹ thuật ngày, vì vậy nó là hoàn toàn tùy thuộc vào cách nó là serialized/deserialized.

Bạn có thể sử dụng reviver tham số của JSON.parse:

this._http.get(this._getListUrl).map(res => JSON.parse(res.text(), this.reviver)); 

reviver(key, value):any 
{ 
    if('timestamp' === key){ 
     //you can use any de-serialization algorithm here 
     return new Date(value); 
    } 
    return value; 
} 

Answer 4

Hãy thử ví dụ của tôi nếu công việc của mình cho bạn. Và đây là tài liệu cho Date và Pipe.

<span>Date : {{announcement.createdAt | date:'EEE, d MMM,y'}}</span> 
<span>Time : {{announcement.createdAt | date:'shortTime'}}</span> 

Output:

Date : Tue, 20 Dec,2016  
Time : 2:22 PM