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

【问题标题】：Can't bind to 'matDatepicker' since it isn't a known property of 'input' - Angular无法绑定到“matDatepicker”，因为它不是“输入”的已知属性 - Angular
【发布时间】：2017-11-18 22:34:15
【问题描述】：

我刚刚复制并粘贴了 datePicker 和 input 的 Angular 材质代码，但 datePicker 出现此错误。

app.module

import {MaterialModule} from '@angular/material';
@NgModule({
imports: [
...
MaterialModule
]

<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>

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

无法绑定到“mdDatepicker”，因为它不是 'input' 如果 'md-datepicker' 是 Angular 组件，则验证它是这个模块的一部分。 2. 如果 'md-datepicker' 是一个 Web 组件，则将 "CUSTOM_ELEMENTS_SCHEMA" 添加到该组件的 '@NgModule.schemas' 压制此消息。（“ [错误 ->]

错误是日期选择器，当我删除它时，错误消失了

【问题讨论】：

您添加了 MaterialModule，但您还必须添加您使用的所有模块。在这种情况下，它是MdInput 和MdDatePicker。

标签： angular angular-material angular-material2

【解决方案1】：

在使用mat-datepicker时，您还必须导入MatDatepickerModule，同时建议也导入MatNativeDateModule。请参阅文档 here。

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)
  ]

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

提及：请避免使用MaterialModule，因为它会在未来被弃用。

【讨论】：

我需要将我的@angular/material 模块更新到当前的最新版本，我的IDE 在我导入它时找不到MdDatePickerModule。我想，一旦完成，我的问题就会得到解决
@edkeveked 好的，也许您还需要根据最新的@angular/material 更新所有@angular/xxx 软件包（我以前做过这件事）。祝你好运。
这对我不起作用...即使MdDatepickerModule 在app.module 中，错误仍然存在。
@NateGardner 你在哪里使用mdDatePicker？这是在子模块使用的吗？
还要确保您添加的是[matDatepicker]，而不是[matDatePicker]。不要问我是怎么知道的。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

要在应用程序中使用 MatDatePicker，请在您的 app.module.ts (or the current module your component/page belongs to) 文件中添加以下行：

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

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

对于 Angular 10.x 独立导入它们

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

在imports和exports'数组的@NgModule下添加MatDatepickerModule、MatNativeDateModule：

@NgModule ({
           imports: [
               MatDatepickerModule,
               MatNativeDateModule 
           ],
           exports: [
               MatDatepickerModule, 
               MatNativeDateModule 
           ]
       })

【讨论】：

【解决方案4】：

你只需要导入下面的模块

import {MatDatepickerModule} from '@angular/material/datepicker';

@NgModule ({
  imports: [
    MatDatepickerModule
   ]
  })

【讨论】：

【解决方案5】：

下面的导入适用于我在 Angular8 中的解决方案

@NgModule ({
        imports: [
            MatDatepickerModule,
            MatNativeDateModule,
        ]
 });

【讨论】：

【解决方案6】：

在最新版本的 Angular Material 中，在这种情况下，您必须从 @angular/material/datepicker 导入 MatDatepickerModule，从 @angular/material/core 导入 MatNativeDateModule。

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

 @NgModule ({
   imports: [
    MatDatepickerModule,
    MatNativeDateModule
   ]
 })

【讨论】：