无法绑定到“matDatepicker”，因为它不是“输入”的已知属性

Posted 2023-02-22

【中文标题】无法绑定到“matDatepicker”，因为它不是“输入”的已知属性

【英文标题】：Can't bind to 'matDatepicker' since it isn't a known property of 'input'

【发布时间】：2021-08-16 06:51:20

【问题描述】：

我将使用材料日期选择器控制器。但它显示一个错误。 当然，我在 app.module.ts 文件中添加了 MatDatepickerModule。 让我在这里向您展示我的部分代码：

import  MatDatepickerModule  from '@angular/material/datepicker';
...
@NgModule(
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        ...,
        MatDatepickerModule,
        SharedModule.forRoot(),
    ],
    providers: [],
    bootstrap: [AppComponent]
)
export class AppModule 

这是html代码：

<mat-form-field appearance="fill">
              <mat-label>Event start time</mat-label>
              <input matInput [matDatepicker]="picker">
              <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
              <mat-datepicker #picker></mat-datepicker>
            </mat-form-field>

以下是错误日志：

Error: src/app/.../test.component.html:67:31 - error NG8002: Can't bind to 'matDatepicker' since it isn't a known property of 'input'.

67               <input matInput [matDatepicker]="picker">

我错过了什么？

【问题讨论】：

您是否按照docs 中的说明导入了MatNativeDateModule 或MatMomentDateModule？

不，我没有让我尝试...

包括了这两个模块，但它也不起作用。我没有使用MatNativeDateModule 或MatMomentDateModule。

这能回答你的问题吗？ Can't bind to 'matDatepicker' since it isn't a known property of 'input' - Angular

你必须在你的组件被添加到声明数组（See this answer）的那个模块中导入MatDatepickerModule，在app.module中导入只会日期选择器在@添加的组件中可用987654335@声明

【参考方案1】：

您必须在声明组件的位置导入MatDatepickerModule。

@NgModule(
    declarations: [
        AppComponent //Date picker is only available in this component
    ],
    imports: [
        ...
        MatDatepickerModule
    ]
)
export class AppModule 

假设你有hallway.module

@NgModule(
    declarations: [
        HallwayComponent
    ],
    imports: [
        ...
        MatDatepickerModule //Import it here too, to make it available in Hallway component
    ]
)
export class HallwayModule 

您还可以创建shared.module 或material-shared.module 并在其中导入材料组件，并在需要时在每个模块中导入此共享模块。