Question

我刚尝试在 angular2 应用中使用简单的date管道：

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

我得到的错误是：

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

我确实在此组件和其他一些组件之间共享了一个用户模型（此处为最小）：

export class User { public registered: Date; }

我从后端获取用户数据为JSON，它是ISO 8601： 2016-03-28T07:26:01.202Z 。

当我使用自己的自定义管道时，它可以工作（例如下面的例子）。

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

名称更好 DatePipe 显然是一个双关语，我写的是更好的angular2代码然后发明者;）

Answer 1

论证显然是C:\Python27\pythonw.exe "D:\path with spaces in it to\myscript.py"，而不是string。在将其传递给管道之前，您需要将其转换为Date。 JSON不支持类型Date。

Date

或类似的取决于您获取用户对象的方式。

另见Converting string to date in js

Answer 2

您可以编写一个中间管道，而不是重新实现管道，首先将组件的字符串值转换为日期：

<强>字符串到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);
    }
}

<强>组件

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

<强>模板

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

Answer 3

我在两者中都看到了优点，但是OP的代码有些限制：它总是一直返回相同的日期格式，你最终还是要编写另一个Pipe来改变这种格式。

第二种方法听起来更容易管理：但是，有些东西，管道不是你在@Component中包含的东西，你必须在app.module.ts中引用它作为导入语句：

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

以及需要将其包含在@NGModule中（{...在声明下的页面下方。

从那里，您可以使用自定义管道，然后继续使用Angular's Date Pipe

Angular2 DatePipe处理ISO 8601日期（管道'DatePipe'的参数'*'无效）？

3 个答案: