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

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

HTML

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

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

我正在使用日期过滤器属性，但我所有的变量都未定义

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;
    }
 }

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

将上下文带入您的filterDates方法，您需要使用箭头函数，而不是像您那样将其声明为常规方法（否则this关键字将引用里面的上下文matDateFilter班级，你的pipe and 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 演示 https://stackblitz.com/edit/angular-stackoverflow-57989822?file=app/datepicker-filter-example.ts