Angular-使用带有ngModel的日期管道

Question

我在控制台中收到以下错误-"错误：InvalidPipeArgument:"无法转换"；[对象对象]"；转换为管道"DatePipe"的日期；。

我有一个日历输入，它应该允许用户选择一个日期，然后以某种格式传递该日期，"dd/MM/yyyy"。我希望在他们选择日期后，所选日期显示在日历输入中。

我意识到，如果我有一个管道，我就不能在[ngModel]上进行双向绑定，所以我正在使用(ngModelChange(。如果我删除#createdByCutOffDate="；ngModel"；则该错误被删除，但我无法在日历输入中看到所选日期显示。

我还尝试了updateCreatedByCutOffDate((方法，该方法采用日期类型或字符串。

this.createdByCutOffDate的格式如下-"2022年2月17日星期四00:00:00 GMT+0000(格林尼治标准时间(">

component.html

<input type="date"
id="createdByCutOffDate"
[ngModel]="createdByCutOffDate | date:'dd/MM/yyyy'"
#createdByCutOffDate="ngModel"
(ngModelChange)="updateCreatedByCutOffDate($event)" />

组件.ts

createdByCutOffDate: Date;
updateCreatedByCutOffDate(date: string) {
this.createdByCutOffDate = new Date(date);
}

Answer 1

createdByCutOffDate是一个具有其方法和属性的Date对象
因此，要解决您的问题，请使用"createdByCutOffDate.date | date:'dd/MM/yyyy'"而不是"createdByCutOffDate | date:'dd/MM/yyyy'"