Angular2 DatePipe Verarbeitung ISO 8601 Datum (ungültiges Argument '*' für Pipe 'DatePipe')?

Question

Ich habe gerade versucht, ein einfaches date Rohr in meinem angular2 App zu verwenden:

Registered: {{user.registered | date:'shortDate'}} 

Der Fehler, den ich bekommen ist:

Invalid argument '2016-03-28T07:25:40.824Z' for pipe 'DatePipe' in [{{user && user.registered | date:'shortDate' }} in UserDialog@16:57] 

Ich habe eine User-Modell (minimal hier) Geteilt zwischen dieser Komponente und einigen anderen:

export class User { public registered: Date; } 

Ich bekomme die Benutzerdaten als JSON vom Backend, und es ist ein ISO 8601: 2016-03-28T07:26:01.202Z.

Wenn ich mein eigenes benutzerdefiniertes Rohr verwende, funktioniert es (Beispiel unten).

import {Pipe, PipeTransform} from 'angular2/core'; 
/** 
* The default ISO Date is not parseable by ts compiler or some such. 
*/ 
@Pipe({ name: 'betterDate' }) 
export class BetterDatePipe implements PipeTransform { 

    transform(date: number): string { 

    let d = new Date(date); 
    return d.toLocaleDateString(); 
    } 
} 

Der Name, BessereDatePipe ist offensichtlich ein Wortspiel auf mich besser angular2 Code zu schreiben dann die Erfinder;)

Answer 1

Das Argument offensichtlich ein string, kein Date. Sie müssen es in Date konvertieren, bevor Sie es an die Leitung übergeben. JSON unterstützt den Typ Date nicht.

user.registered = new Date(json.registered); 

oder ähnlich, je nachdem, wie Sie das Benutzerobjekt erhalten.

Siehe auch Converting string to date in js

Answer 2

Statt Neuimplementierung des Rohres, können Sie einen Vermittler ein schreiben, den String-Wert in Datum der Komponente Transformation zuerst:

String-to-date.pipe.ts:

import {Pipe, PipeTransform} from '@angular/core'; 
/** 
* Pipe to transform a string to a date 
*/ 
@Pipe({name: 'stringToDate'}) 
export class StringToDatePipe implements PipeTransform { 
    /** 
    * Constructor 
    */ 
    constructor() { 
    } 
    /** 
    * Transform a date that is passed as string into a date 
    * @param value The date passed as string 
    * @returns {Date} The Date object 
    */ 
    transform(value: string): Date { 
     return new Date(value); 
    } 
} 

Komponente

import {StringToDatePipe} from './string-to-date.pipe'; 
@Component({ 
    ... 
    pipes: [StringToDatePipe], 
    ... 
}) 

Vorlage

Registered: {{user.registered | stringToDate | date:'shortDate'}} 

Answer 3

Ich sehe Verdienste in beide, aber der Code des OP etwas zu beschränken: es gibt immer das gleiche Datumsformat der ganze Zeit, sie ist schließlich ein anderes Rohr gehen zu schreiben, das zu ändern Format trotzdem.

Die zweite Methode klingt sehr viel überschaubarer: Allerdings, ein paar Dinge, die Pipes ist nicht etwas, das Sie in der @Component enthalten, müssten Sie verweisen, dass in der app.module.ts sowohl ein Import-Anweisung:

import { StringToDatePipe } from './???/string-to-date.pipe'

sowie um es in der @NGModule aufzunehmen ({... weiter unten auf der Seite unter Erklärungen.

Von dort können Sie das Custom Rohr, verwenden und dann bewegen auf mit Angular's Date Pipe