ウェブサイト検索

angular - NgxMatDatetimePicker は MatDatepickerBase 型に代入できません

今日は 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",
...

私のコードはすべて正常に動作しますが、ngx-mat-datetime-picker を参照して mat-datepicker-toggle を定義している HTML ではうまく動作しません。次のエラーが発生します:

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 を設定することでバリデーションの利点を得たいです。

何か見落としているのでしょうか、それともこのバグが修正されたときに教えてもらえますか？

回答 #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>

関連記事