如何使用带有部分应用过滤功能的 Angular Material 日期选择器？

Question

我一直在尝试使用 Angular Materials 日期选择器组件创建日期选择器/输入。

我正在迭代一组报告，需要为每个报告旁边的创建一个输入。 每份报告都有一个自定义日期，超出该日期将应用自定义过滤器，将允许的日期转换为基本上的瑞士奶酪。换句话说，最小/最大的规则太复杂，我需要使用过滤函数，and将单独的报告交给它。

在实现这一点时，我偶然发现了一个特别有趣的行为：Angular 无法处理过滤器函数的 lambda。 这是我写的一张票（显然这是预期的行为）

Github问题

堆栈闪电战

要点是，变化检测中的循环将导致表达式被无限期地重新计算，因为它每次都是一个新的 lambda。使用OnPush变化检测策略在这里没有任何作用，仍然是一个循环。

我希望关联一个循环变量（“@for（报告的report；跟踪报告）{}”） 带过滤器。我需要在 TypeScript 中访问此模板循环变量。

这通常是可能的，除了 [matDatepickerFilter] 不支持 $event。

使用返回与过滤器函数类型兼容的 lambda 的函数在纸面上可行，但会导致组件在实践中停止工作（请参阅 stackblitz）。

似乎没有办法让“matInput”或“matNativeControl”不实现“exportAs”，因此“#var=matInput”也不可能。

更改变更检测策略也不能防止此问题。 我没主意了。

我可以使用哪些设计模式将报告与输入关联起来，并根据该报告为日期选择器设置过滤器？

如果有帮助，我可以提供更完整的 Stackblitz 或编辑当前的 Stackblitz。

Answer 1

所以基本上它迫使您对所应用的过滤器有一个参考。 如果过滤器基于每个项目的某些自定义逻辑，您可以尝试的一个选项是保留对创建的过滤器的引用。

例如：

打字稿：

private readonly filters = new Map<HTMLInputElement, (arg: Moment | Date | null) => boolean>();

filter2(element: HTMLInputElement): (arg: Moment | Date | null) => boolean {
  let filter = this.filters.get(element);
  if (filter) {
    return filter;
  }
  filter = (arg: Moment | Date | null) => true;
  this.filters.set(element, filter);
  return filter;
}

HTML

<mat-form-field>
  <mat-label> Borked </mat-label>
  <input
    matInput
    #dateBox2
    [ngModel]="date2"
    [matDatepicker]="datePicker2"
    [matDatepickerFilter]="filter2(dateBox2)"
  />
  <mat-datepicker-toggle matIconSuffix [for]="datePicker2" />
  <mat-datepicker #datePicker2 />
</mat-form-field>