关于无法绑定到’matDatepicker’，因为它不是’input’的已知属性：无法绑定到’matDatepicker’，因为它不是’input’的已知属性-Angular


Can't bind to 'matDatepicker' since it isn't a known property of 'input' - Angular

我刚刚复制并粘贴了用于datePicker和输入的棱角材质代码，但是对于datePicker我却收到此错误。

app.module

1
2
3
4
5
6
import {MaterialModule} from '@angular/material';
@NgModule({
imports: [
...
MaterialModule
]
1
2
3
4
5
6
7
8
9
<md-input-container>
    <input mdInput placeholder="Rechercher" [(ngModel)]="filterHistorique">
</md-input-container>

<md-input-container>
    <input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
    <button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>
<md-datepicker #picker></md-datepicker>

这是我在浏览器中遇到的错误：

Can't bind to 'mdDatepicker' since it isn't a known property of
'input' If 'md-datepicker' is an Angular component, then verify that
it is part of this module.
2. If 'md-datepicker' is a Web Component then add"CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component
to suppress this message. (" [ERROR
->]

错误是针对日期选择器的，当我将其删除时，错误消失了

相关讨论

使用mat-datepicker时，还必须导入MatDatepickerModule，也建议也导入MatNativeDateModule。在这里查看文档。

1
2
3
4
5
6
7
8
9
import { MaterialModule, MatDatepickerModule, MatNativeDateModule } from '@angular/material';
@NgModule({
  imports: [
    ...
    MaterialModule,            // <----- this module will be deprecated in the future version.
    MatDatepickerModule,        // <----- import(must)
    MatNativeDateModule,        // <----- import for date formating(optional)
    MatMomentDateModule         // <----- import for date formating adapted to more locales(optional)
  ]

有关日期格式的可选模块，请参阅材料团队的DateAdapter模块。

提及：请避免使用MaterialModule，因为将来会不推荐使用它。

相关讨论

如果您使用了NgModule和formgroup，则需要导入FormsModule和ReactiveFormsModule。所以你的app.module应该像这样

1
2
3
4
5
6
7
8
import {MaterialModule} from '@angular/material';
@NgModule({
  imports: [
    MdDatepickerModule,        
    MdNativeDateModule,
    FormsModule,
    ReactiveFormsModule
  ]

注意：MaterialModule已删除。请改用单独的模块。像MdDatepickerModule一样，请看这里https://github.com/angular/material2/blob/master/CHANGELOG.md#200-beta11-carapace-parapet-2017-09-21

下面的导入对我有用，我在Angular8中的解决方案

1
2
3
4
5
6
@NgModule ({
        imports: [
            MatDatepickerModule,
            MatNativeDateModule,
        ]
 });

要在应用程序中使用MatDatePicker，请在app.module.ts文件中添加以下行：

  • 在您的app.module.ts中导入MatDatepickerModule，MatNativeDateModule。

    例如：

    import { MatDatepickerModule, MatNativeDateModule } from '@angular/material';

  • 在导入和导出中，在@NgModule中添加MatDatepickerModule，MatNativeDateModule：

    • **

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    @NgModule ({
                imports: [
                    MatDatepickerModule,
            MatNativeDateModule
                ],
                exports: [
                    MatDatepickerModule,
                    MatNativeDateModule
                ]
            })

    **