在Angular 2 App中的双向绑定属性中转换日期

【问题标题】：Transforming Date in Two-Way Bound Property in Angular 2 App在Angular 2 App中的双向绑定属性中转换日期
【发布时间】：2017-10-31 19:30:14
【问题描述】：

我的 Angular 2 应用程序中显示了一个日期，该日期以不希望的格式打印，如下所示：2012-04-02T00:00:00.000Z

我想做的是使用 Angular 的日期管道来转换这些数据，以便以更人性化的格式打印。有没有办法可以在我使用双向绑定的输入上使用日期管道？换句话说，我可以在看起来像这样的代码上使用日期管道吗？

<input class="app-input" [(ngModel)]="staff.profile.hireDate" placeholder="None"/>

我尝试了各种尝试，但到目前为止都无法使其工作。因此，我想知道这是否可能。

如果没有，我可以通过纯 JS 处理这个问题的另一种方法是什么？我愿意接受任何有效且最容易实施的可能性。

【问题讨论】：

【解决方案1】：

您可以在您的组件中执行此操作。

import { DatePipe } from '@angular/common';

然后将其添加到组件或 ngModule 中的 providers 数组中。

在您的组件中，您将其注入到您的构造函数中：

constructor(private myDatePipe: DatePipe) {}

并修改您的变量属性：

this.staff.profile.hireDate = 
    this.myDatePipe.transform(new Date(this.staff.profile.hireDate));

如果你想指定输出，这里例如使用'short' 选项：

this.staff.profile.hireDate = 
    this.myDatePipe.transform(new Date(this.staff.profile.hireDate), 'short');

【讨论】：