更改最小或最大日期后角度日期选择器未更新

Question

我在 mat-card 中有一个日期选择器，如下所示：

<mat-card class="datepickerContainer">
    <mat-form-field appearance="fill">
        <mat-label>Month and Year</mat-label>
        <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="datePicker" [formControl]="date">
        <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
        <mat-datepicker #datePicker
                        startView="multi-year"
                        (yearSelected)="yearSelectedHandler($event)"
                        (monthSelected)="monthSelectedHandler($event, datePicker)"
                        panelClass="example-month-picker">
        </mat-datepicker>
    </mat-form-field>
</mat-card>

在ngAfterViewInit() 中，最小可选年份根据配置对象中指定的年份设置如下：

  ngAfterViewInit(): void {
    this.configService.getConfiguration().subscribe((configs) => {
      this.minDate.setFullYear(configs.startYear);
    });
  }

我已经对此进行了调试，并且正在使用正确的年份作为参数调用 this.minDate.setFullYear()。但是，当我现在在前端打开日期选择器时，它似乎完全被禁用了：

我可以点击选定的年份（2022），但我无法选择月份：

我没有在任何地方禁用日期选择器，为什么它会被禁用，为什么最小年份没有设置为 2021？我还注意到，当我最初将最小日期设置为其他值（如 2021 年）时，它工作正常，所以问题一定与 Angular 有关，不知道我在 ngAfterViewInit() 中更改了最小日期。

Answer 1

你必须打电话

ChangeDetectorRef.markForCheck()

之后

this.minDate.setFullYear(configs.startYear);

否则 Angular 将不知道任何变化，因为 Angular 会在 @Input 的引用发生变化时检测到变化，而不是在绑定对象发生变化时检测到变化。