Açısal 2 Tarih atması

Question

Angular 2 uygulamam var. Bir hizmet gibi sonuçları döndüren bir API istekleri verileri aşağıdaki: My Açısal 2 servis (biz burada mutlu yoldasın gibi kısalık için hata işlemeyi kestim) şöyle

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

: böyle

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

ve benim modeli:

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

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

ve bunun gibi benim bileşen

Ben damgası aslında olmadığına inanıyorum

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

bazı araştırmadan sonra: Başvuru aşağıdaki hata mesajı ile patlarsa o kadar {{item.timestamp | date:'short'}} gibi DatePipe kullanarak zaman damgası görüntülemek çalıştığımızda

Her şey ancak çalışıyordu benziyordu Date türüne dönüştürülüyor, ancak bunun yerine string ayarlanıyor. Sanırım bu, Date tipinin Response.json() adı altında bilinmediği için geçerli mi? Yoksa tamamen başka bir şey mi özlüyorum? Bunun için bir düzeltme mi var, yoksa etrafta mı çalışıyor?

Answer 1

Buluşmaya tek dize alanını harita olacaktır:

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

date boru sadece Date değerleri değil dize değerleri kabul eder.

JSON'daki tarihleri ​​nasıl dönüştürüleceğini öğrenmek için How to get Date object from json Response in typescript adresine bakın.

Alternatif

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

İpucu gibi kullanabilirsiniz Kendi dize güncel dönüşüm borusu sonra

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

ve oluşturabilirsiniz: on pipes: [StringToDate] için boruyu eklemeyi unutmayın Kullanmak istediğiniz @Component(...) decorater.

tamamen o serileştirilemezse/seri hale nasıl yukarı olacak şekilde JSON, herhangi bir tarih spesifikasyonu sağlamaz aynı zamanda

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

Answer 3

bakınız. sizin için kendi çalışma eğer

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

örneğimizdek deneyin:

Sen JSON.parse ait reviver parametresini kullanabilirsiniz. Ve işte Date ve Pipe için dokümanlar.

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

Çıktı:

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