Angular Mat 日历根据休息结果禁用日期

Question

我正在使用 Angular 材料日历（即）mat-calendar。我试图根据动态值禁用日历中的某些日期。

超文本标记语言

    <mat-calendar [headerComponent]="exampleHeader" [dateFilter]="filterDates"></mat-calendar>

我正在使用自定义标头来捕获下一个/上个月的事件，然后调用一些休息 api，并根据此调用的结果，我想禁用一些日期。调用this.nextClicked()和this.previousClicked(); 仅在其余 api 给出响应后生成。

我正在使用dateFilter属性，但我的所有变量均未定义

TS

  public filterDates(date: Date): boolean {
    if (this.apiResult !== undefined) {
      let d = this.pipe.transform(date, 'yyyy-MM-dd');
      return this.apiResult.has(d);
    } else {
      return true;
    }
 }

如果您有任何想法或任何方法以编程方式更改禁用日期谢谢

Answer 1

要将上下文带入您的filterDates方法中，您需要使用箭头函数，而不是像您那样将其声明为常规方法（否则this关键字将引用类内的上下文matDateFilter，其中您的pipe和apiResult不存在）：

filterDates = (date: Date): boolean => {
  if (this.apiResult !== undefined) {
    let d = this.pipe.transform(date, 'yyyy-MM-dd');
    return this.apiResult.has(d);
  } else {
    return true;
  }
}

Stackblitz 演示