2

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

HTML

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

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

4

1 回答 1

4

要将上下文带入您的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 演示

于 2019-09-18T09:47:41.123 回答