Angular 2日期反序列化

Question

我有一个Angular 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"}
    ]
}

我的Angular 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);
}

我的模特是这样的:

export class SomeModel {

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

当我尝试使用DatePipe显示时间戳时,一切看起来都在工作,因此{{item.timestamp | date:'short'}}应用程序会出现以下错误消息:

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

经过一番调查后,我认为时间戳实际上并没有被转换为Date类型,而只是被设置为a string.我猜这是因为当时Date不知道的类型Response.json()被称为？还是我完全错过了其他的东西？有没有修复或解决这个问题？

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中转换日期的信息,请参阅如何从json中获取Date对象.

或者,您可以创建自己的字符串到目前的转换管道

@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