尝试在 mat-calendar、Angular 中使用 [dateFilter] 和 (selectedChange) 时出错

Question

HTML 代码：

<div class="form-group">
                             <mat-calendar (selectedChange)="onSelectCheckInDate($event)"
                                            [selected]="selectedDateForCheckIn"
                                           [minDate]="currentDateAsString">
                                          </mat-calendar>

                             <mat-calendar [selected]="selectedDateForCheckOut"
                                           [minDate]="minDateForCheckout"
                                           (selectedChange)="onSelectCheckOutDate($event)"
                                           [dateFilter]="myFilter"
                             ></mat-calendar>
                            </div>

TS代码：

myFilter = (date: Date): boolean => {
    return !this.isDateReserved(date!);
  };

  isDateReserved(date: Date): boolean {
    return this.reservedDates.some(reservedDate => this.isSameDay(date, reservedDate));
  }

  isSameDay(date1: Date, date2: Date): boolean {
    return date1.getFullYear() === date2.getFullYear() &&
      date1.getMonth() === date2.getMonth() &&
      date1.getDate() === date2.getDate();
  }
 onSelectCheckOutDate(event: Event) {
    this.selectedDateForCheckOut = event;
  }

错误是 TS2345：“日期 | 类型的参数” null' 不可分配给类型'Event_2' 的参数。类型“null”不可分配给类型“Event_2”。(selectedChange)="onSelectCheckOutDate($event)"

如果我删除 myFilter 方法参数（日期：日期），错误就会消失，但我需要该参数。我应该怎么办？提到如果我使用 dateClass 而不是 dateFilter ，我也会遇到同样的错误。

我尝试实现一个 mat-calendar，我需要根据所做的预订来过滤可用日期。

Answer 1

我认为你的问题是这一行：

onSelectCheckOutDate（事件：事件）{ this.selectedDateForCheckOut = 事件； }

参数 event 不是 Event 类型。这是一种特殊的 Angular Material 类型。

尝试不声明类型，将其声明为 Any，或从材料日历文档中将其声明为正确的类型。