MatDatepickerFilter - 过滤器函数无法访问 class 变量

Question

具有如下定义的过滤器的 MatDatePicker：

<mat-form-field class="example-full-width">
  <input matInput [matDatepickerFilter]="myFilter" [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

export class DatepickerFilterExample {
  someDateToBlock: number = 3;
  myFilter = (d: Date): boolean => {
    const day = d.getDay();
    // THIS FUNCTION CANNOT ACCESS THE VARIABLE 'someDateToBlock'
    return day !== 0 && day !== 6;
  }
}

我想访问过滤器函数中的变量 someDateToBlock（或任何其他变量）。是否有解决方法来实现这一点？

Answer 1

这是有效的，这里是 plunkr link：https://plnkr.co/edit/oRGfxLSrn6GdfRhYO1rr?p=preview

export class DatepickerOverviewExample {
  someDateToBlock: number = 3;
  myFilter = (d: Date): boolean => {
    const day = d.getDay();
    // THIS FUNCTION CANNOT ACCESS THE VARIABLE 'someDateToBlock'
    return this.someDateToBlock;
  }
}

我也用 alert(this.someDateToBlock) 检查过

Answer 2

我遇到了同样的问题，似乎 material 日期选择器无法访问过滤器功能组件的 "this"。对我来说改变：

[matDatepickerFilter]="myFilterFunction"

至

[matDatepickerFilter]="myFilterFunction.bind(this)"

成功了。

Answer 3

类型“(d: Date) => boolean”不可分配给类型 'DateFilterFn<Date | null>'

myFilter = (d: Date ** |null **): boolean => {
   const day = (d || new Date()).getDay();
   // Prevent Saturday and Sunday from being selected.
   return day !== 0 && day !== 6;
};

Answer 4

你可以

myLegalDate = (d: Date): boolean => {
    //Your code
    //You can see the variable someDateToBlock
    console.log(this.someDateToBlock);
}

myFilter = this.myLegalDate.bind(this);

MatDatepickerFilter - 过滤器函数无法访问 class 变量

MatDatepickerFilter - Filter function can't access class variable

angular-material2

datefilter