如何为Angular Material Datepicker Filter传入行索引实现动态过滤

你当前的写法错误点在于：[dateFilter] 要求传入的是仅接收Date类型参数、返回布尔值的函数，而你在模板中直接写date_picker_filters(i)相当于当场执行了该方法，传入的是方法执行后的返回值（布尔值），不符合输入要求，因此无法生效。

方案1：使用高阶函数返回行专属过滤逻辑 #

修改组件中的方法，让其接收行索引后返回对应行的过滤函数，完全匹配dateFilter的输入要求：

组件代码 #

// 提前把后端返回的每行过滤日期按索引存在数组里，不要在过滤函数中发异步请求
private rowForbiddenDates: Date[][] = [];

public date_picker_filters(i: number): (d: Date) => boolean {
  // 返回专属于第i行的过滤函数
  return (d: Date): boolean => {
    // 这里写你的过滤逻辑，通过i取对应行的禁用日期判断即可
    const forbiddenDates = this.rowForbiddenDates[i];
    return !forbiddenDates.some(date => date.getTime() === d.getTime());
  }
}

模板代码 #

不需要修改原模板写法，保持以下代码即可：

<mat-date-range-input [rangePicker]="picker" [dateFilter]="date_picker_filters(i)">

优化建议 #

如果你的表格支持排序、分页、筛选操作，行索引i会发生变化，可能导致索引和行不匹配的问题。建议改成用行数据的唯一ID替代索引存储对应过滤日期，逻辑更稳定：

<!-- 模板中传入当前行的唯一标识，比如row.id -->
<mat-date-range-input [rangePicker]="picker" [dateFilter]="date_picker_filters(row.id)">

内容的提问来源于stack exchange，提问作者user9802118