Angular Mat Calendar根据休息结果禁用日期 [英] Angular Mat Calendar Disable date based on Rest result

问题描述

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

I am using Angular material calendar (i.e) mat-calendar. I am trying to disable some of the dates in the calendar based on dynamics value.

HTML

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

我正在使用自定义标头，以捕获下一个/上一个月的事件，然后调用一些rest api，根据这次通话的结果，我想禁用一些日期。
只有在其余api做出响应之后，才会生成 this.nextClicked（）和 this.previousClicked（）; 的调用。

I am using a custom header, to catch next/previous month events and then call some rest api, and based on the result of this call, I want to disable some dates. Calls of this.nextClicked() and this.previousClicked(); are generated only after the rest api gave response.

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

I am using the dateFilter attribute, but all my variables are undefined

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

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

If you have any idea or any methods to change disabled dates programmatically Thanks

推荐答案

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

To take the context into your filterDates method you need to use arrow functions instead of declaring it as a regular method as you did (otherwise the this keyword will be referring to the context inside matDateFilter class, where your pipe and apiResult don't exist) :

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演示

这篇关于Angular Mat Calendar根据休息结果禁用日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！