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

Question

我在控制台中收到以下错误 - “错误:InvalidPipeArgument:'无法将“[object Object]”转换为管道'DatePipe'的日期'。

我有一个日历输入，应该允许用户选择一个日期，然后以特定格式“dd/MM/yyyy”传递该日期。一旦他们选择了日期，我希望所选日期显示在日历输入中。

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

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

this.createdByCutOffDate 采用以下格式 - 'Thu Feb 17 2022 00:00:00 GMT+0000(格林威治标准时间)'

组件.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'"