У меня есть приложение 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, а вместо этого устанавливается только string. Я предполагаю, что это потому, что тип Date не известен в то время, когда вызывается Response.json()? или я вообще что-то пропустил? Есть ли для этого исправление или работа?
Я бы сопоставил поле строки с датой:
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;
}
В трубке date принимаются значения date не строковые значения.
Смотрите Как получить объект Date из json Response в typescript для того, как конвертировать даты в JSON.
В качестве альтернативы вы можете создать свой собственный строковый протокол преобразования
@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(...), где вы хотите ее использовать.
См. также
Попробуйте мой пример, если его работа для вас. И вот документы для 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
JSON не предоставляет спецификацию даты, поэтому полностью зависит от того, как она сериализована/десериализована.
Вы можете использовать reviver параметр 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;
}