typescript - directives - element angular 4

Deserialización de fecha angular 2

Question

Tengo una aplicación de Angular 2. Un servicio es datos de solicitud de una api que devuelve los resultados como los siguientes:

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

Mi servicio de Angular 2 se ve así (he cortado el manejo de errores por brevedad, ya que estamos en el camino feliz aquí):

getList() : Observable<SomeModel[]> {
return this._http.get(this._getListUrl).map(this.extractData);
}
private extractData(res: Response) {
return res.json().data || {};
}

y mi componente como este:

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

y mi modelo así:

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

Sin embargo, todo parecía funcionar. Sin embargo, cuando intenté mostrar la marca de tiempo utilizando el DatePipe como {{item.timestamp | date:''short''}} {{item.timestamp | date:''short''}} la aplicación se ilumina con el siguiente mensaje de error:

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

Después de algunas investigaciones, creo que la marca de tiempo no se está convirtiendo realmente al tipo de Date sino que simplemente se está configurando una string . Supongo que esto se debe a que el tipo de Date no se conoce en el momento en que se llama a Response.json() ? ¿O me estoy perdiendo algo completamente diferente? ¿Hay alguna solución o solución para esto?

Answer 1

El canal de date solo acepta valores de Date , no valores de cadena.

Consulte Cómo obtener el objeto Date de json Response en mecanografía para ver cómo convertir fechas en JSON.

Alternativamente, puede crear su propio canal de conversión de cadena a fecha

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

y luego usarlo como

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

Sugerencia: no olvide agregar la tubería a las pipes: [StringToDate] en la @Component(...) donde desee usarla.

Ver también

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

Answer 2

JSON no proporciona ninguna especificación de fecha, por lo que depende completamente de cómo se serializa / deserializa.

Podría usar el parámetro JSON.parse de 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;
}

Answer 3

Prueba mi ejemplo si es para ti. Y aquí están los documentos para angular.io/docs/ts/latest/api/common/index/DatePipe-pipe.html y Pipe .

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

Salida:

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

Answer 4

Yo asignaría el campo de cadena a una fecha uno:

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;
}