Angular (10) 材质 touchUi datepicker - 不能选择任何东西答案

【问题标题】：Angular (10) material touchUi datepicker - can't select anythingAngular (10) 材质 touchUi datepicker - 不能选择任何东西
【发布时间】：2020-11-21 09:01:02
【问题描述】：

早上好，

我最近将一个相当老的 Angular 项目从 ~6 更新到 10。在我必须修复它的所有其他部分之后，我只剩下我无法获得的材料日期选择器再次工作。

简而言之：它有效，它出现了，我可以轻弹月份并点击年份下拉菜单，但主要内容区域内的任何内容，我都无法点击（日期和年份）。好吧，我可以点击，但什么也没做。没有控制台输出。

我的基本日期选择器包装组件：

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'date-picker-component',
  templateUrl: './date-picker.component.html',
  styleUrls: ['./date-picker.component.css']
})
export class DatePickerComponent {

  @Input() public disabled: boolean;
  @Input() public placeholder: string;
  @Input() public value: Date;
  @Input() public minDate: Date;
  @Input() public maxDate: Date;
  @Input() public filter: Function;
  @Output() public onSelect = new EventEmitter<Date>();

  public onDateChange(date: Date): void {
    this.onSelect.emit(date);
  }
}

<mat-form-field fxFlexFill>
  <input matInput 
    [value]="value"
    [min]="minDate"
    [max]="maxDate"
    [matDatepicker]="picker"
    [placeholder]="placeholder"
    (dateChange)="onDateChange($event.value)"
    (click)="picker.open()"
    [matDatepickerFilter]="filter"
    [disabled]="disabled">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker touchUi #picker></mat-datepicker>
</mat-form-field>

示例用法：

<date-picker-component
    [disabled]="!availableDates || loading"
    [minDate]="today"
    [filter]="dateFilter()"
    placeholder="Select trial date"
    (onSelect)="onDateSelected($event)">
</date-picker-component>

打开选择器的工作原理：

显示选择器：

疯狂地点击日期没有任何反应：

显示年份选择：

疯狂地点击一年没有任何反应：

月份切换工作正常：

最后的细节，相关的包：

    "@angular/animations": "10.1.3",
    "@angular/cdk": "10.2.2",
    "@angular/common": "10.1.3",
    "@angular/compiler": "10.1.3",
    "@angular/core": "10.1.3",
    "@angular/flex-layout": "10.0.0-beta.32",
    "@angular/forms": "10.1.3",
    "@angular/material": "10.2.2",
    "@angular/platform-browser": "10.1.3",
    "@angular/platform-browser-dynamic": "10.1.3",
    "@angular/router": "10.1.3",
    "buffer": "5.6.0",
    "classlist.js": "1.1.20150312",
    "core-js": "3.6.5",
    "hammerjs": "2.0.8",
    "intl": "1.2.5",
    "moment": "2.29.0",
    "rxjs": "6.6.3",
    "tslib": "2.0.0",
    "web-animations-js": "2.3.2",
    "zone.js": "0.10.3"

哦，我想证明设置详细信息也很有用（在app.module.ts 提供者中）：

{
  provide: MAT_DATE_LOCALE,
  useValue: 'en-GB'
}

并且还在某处或其他地方导入MatNativeDateModule...

编辑：发现最初的原因是过滤器。它不喜欢过滤器。取下过滤器，我可以再次选择日期和事物。没有多大帮助，但这是一个开始。过滤器正在工作 - 可以看到过滤日期，但不允许对其进行选择。

这是上面的过滤器：

public dateFilter(): (dt: Date) => boolean {
    const fn = (dt: Date): boolean => {
      const day = DateExtensions.toStringFormat(dt, 'dddd');
      return ArrayExtensions.firstOrDefault(this._availableDates, x => x.day === day) != undefined;
    };

    return fn;
}

【问题讨论】：

标签： angular typescript datepicker angular-material angular-material-datetimepicker

【解决方案1】：

这个光荣的人在我的 GitHub post 上找到的修复。

似乎 Angular 11 不喜欢评估过滤器的原始方式：

public dateFilter(): (dt: Date) => boolean { ... }

<date-picker-component
    [filter]="dateFilter()"
    ...>
</date-picker-component>

相反，它现在很高兴：

public dateFilter = (dt: Date): boolean => { ... }

<date-picker-component
    [filter]="dateFilter"
    ...>
</date-picker-component>

【讨论】：