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

Question

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

HTML

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

我正在使用自定义 header，以捕获 next/previous 个月的事件，然后调用一些休息 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 class，您的 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 demo

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

Angular Mat Calendar Disable date based on Rest result

datepicker

angular

mat-datepicker