NgxMatDatetimePicker无法分配给MatDatepickerBase类型

Question

今天我使用Angular 11.0.0创建了一个新的Angular项目。然后我安装了@angular-material-components/datetime-picker，这是我包含在package.json文件中的部分内容：

...
"@angular/core": "~11.0.0",
"@angular/material": "^11.0.0",
"@angular/animations": "~11.0.0",
...
"@angular-material-components/datetime-picker": "^4.0.5",
...

所有的代码都能正常工作，除了我在HTML中定义mat-datepicker-toggle引用ngx-mat-datetime-picker时出现以下错误：error TS2322: Type 'NgxMatDatetimePicker<any>' is not assignable to type 'MatDatepickerBase<MatDatepickerControl<any>, any, any>'。这是我的HTML代码：

<input matInput [ngxMatDatetimePicker]="picker" placeholder="Choose a date"
         formControlName="scheduledStartDateTime" 
         [min]="minDate" 
         (dateChange)="dateUpdated()" >
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<ngx-mat-datetime-picker #picker [showSpinners]="true" [showSeconds]="false"
                           [stepHour]="1" [stepMinute]="1" [stepSecond]="1"
                           [touchUi]="false" [enableMeridian]="false"
                           [disableMinute]="false" [hideTime]="false">
</ngx-mat-datetime-picker>

我可以通过在tsconfig.json 文件中更改此属性来禁用Angular标记此验证错误（并使我的项目正常运行）：

"angularCompilerOptions": {
    ...
    "strictTemplates": false
}

然而，我希望通过 "strictTemplates": true 获得验证的好处。

我是否遗漏了什么，或者您们能否在修复此bug时让我知道？

- Manuel Hernandez

---

你在 Material 仓库中报告了这个问题吗？ - Tomek

Answer 1

在这种情况下，您需要明确禁用严格模板检查，可以使用 $any() 模板函数。

<input matInput [ngxMatDatetimePicker]="picker" placeholder="Choose a date"
       formControlName="scheduledStartDateTime" 
       [min]="minDate" 
       (dateChange)="dateUpdated()" >
<mat-datepicker-toggle matSuffix [for]="$any(picker)"></mat-datepicker-toggle>
<ngx-mat-datetime-picker #picker [showSpinners]="true" [showSeconds]="false"
                         [stepHour]="1" [stepMinute]="1" [stepSecond]="1"
                         [touchUi]="false" [enableMeridian]="false"
                         [disableMinute]="false" [hideTime]="false">
</ngx-mat-datetime-picker>

- alexnavratil

---

好的。我根据您的代码设置了 "$any(picker)"，然后设置了 "strictTemplates": true，Angular 没有提示任何问题。很棒的方法。 - Manuel Hernandez

@ManuelHernandez：请接受Alex的答案，这是唯一正确的答案。 :) - Mario