Angular Mat Calendar 根据 Rest 结果禁用日期答案

【问题标题】：Angular Mat Calendar Disable date based on Rest resultAngular Mat Calendar 根据 Rest 结果禁用日期
【发布时间】：2020-01-18 13:40:39
【问题描述】：

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

HTML

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

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

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

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

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

【问题讨论】：

标签： angular datepicker mat-datepicker

【解决方案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 demo

【讨论】：