角度2日付の逆シリアル化

Question

私は角度2のアプリケーションを持っています。サービスは、次のような結果を返すAPIからの要求データである：

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

マイ角度2サービスは、（私たちはここで幸せな道にしているとして、私は簡潔にするためにエラー処理をカットしました）このようになります：

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

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

と、このように私のコンポーネント：このような

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

と私のモデル：

私はタイムスタンプが、実際にはないことを信じて

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

いくつかの調査の後：私は、アプリケーションが次のエラーメッセージで吹くので{{item.timestamp | date:'short'}}ようDatePipeを使用して、タイムスタンプを表示しようとしたとき

すべてが、それはしかし、働いていたように見えましたDateタイプに変換されますが、代わりにstringに設定されています。私はこれがDate型が知られていないので、これはと呼ばれていると思いますか？または私は何か他のものが完全に欠けていますか？この問題を解決する方法はありますか？

Answer 1

私は、日付1に文字列フィールドをマッピングします：

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パイプのみDate値ではない文字列値を受け入れます。

はJSONで日付を変換する方法についてHow to get Date object from json Response in typescript参照してください。

代わりにあなたが

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

を独自の文字列から日付変換パイプを作成し、

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

ヒントのようにそれを使用することができます：上pipes: [StringToDate]にパイプを追加することを忘れないでください@Component(...)デコレータを使いたい場所に置いてください。

も参照してください

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

Answer 3

JSONは、任意の日付指定を提供していないので、それは完全にシリアライズ/デシリアライズされているか次第です。あなたのためにその作業場合

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

は私の例を試してみてください：

あなたはJSON.parseのreviverパラメータを使用することができます。ここにはDateとPipeのドキュメントがあります。

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

出力：

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