Angular 2 Datum Deserialisierung

Question

Ich habe eine Angular 2-Anwendung. Ein Dienst ist fordert Daten von einem api, die die Ergebnisse wie die folgenden zurück:

{ 
    "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"} 
    ] 
} 

Mein Angular 2 Service sieht wie folgt aus (ich den Fehler geschnitten habe Kürze Handhabung, da wir auf dem Weg sind glücklich hier) :

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

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

und meine Komponente wie folgt aus:

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

und mein Modell wie folgt aus:

export class SomeModel { 

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

Alles sah aus wie es funktioniert jedoch, wenn ich Zeitstempel mit dem DatePipe wie so {{item.timestamp | date:'short'}} die Anwendung mit der folgenden Fehlermeldung sprengt anzuzeigen versucht:

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

Nach einigen Untersuchungen glaube ich, dass Zeitstempel nicht wirklich ist wird in den Date Typ konvertiert, wird aber stattdessen nur auf string gesetzt. Ich schätze das ist, weil der Date Typ nicht zu der Zeit bekannt ist Response.json() heißt? oder vermisse ich etwas ganz anderes? Gibt es dafür eine Lösung?

Answer 1

Ich würde das String-Feld zu einem Datum Karte ein:

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

Das date Rohr akzeptiert nur Date Werte nicht String-Werte.

Informationen zum Konvertieren von Datumsangaben in JSON finden Sie unter How to get Date object from json Response in typescript.

Alternativ können Sie Ihre eigenen String-to-date Umwandlung Rohr

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

erstellen und dann verwenden, wie

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

Hinweis: vergessen Sie nicht, um das Rohr zu pipes: [StringToDate] auf der hinzufügen @Component(...) Dekorateur, wo Sie es verwenden möchten.

Siehe

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

Answer 3

JSON keine Datumsangabe nicht liefern auch, so ist es völlig bis zu ist, wie es serialisiert/deserialisiert.

Sie könnten reviver Parameter von JSON.parse verwenden:

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

Versuchen Sie meinem Beispiel, wenn seine Arbeit für Sie heraus. Und hier ist die Dokumentation für Date und Pipe.

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

Ausgang:

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