Angular - 使用帶有 ngModel 的日期 pipe

Question

我在我的控制台中收到以下錯誤 - “錯誤：InvalidPipeArgument：'無法將“[object Object]”轉換為 pipe 'DatePipe' 的日期'”。

我有一個日歷輸入，它應該允許用戶輸入 select 一個日期，然后以某種格式“dd/MM/yyyy”傳遞該日期。 一旦他們選擇了日期，我希望所選日期顯示在日歷輸入中。

我意識到如果我有一個 pipe，我就不能在 [ngModel] 上進行雙向綁定，所以我正在使用 (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 object，它有自己的方法和屬性。
因此，要解決您的問題，請使用"createdByCutOffDate.date | date:'dd/MM/yyyy'"而不是"createdByCutOffDate | date:'dd/MM/yyyy'"