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

Question

我刚刚复制并粘贴了 datePicker 和输入的 angular material 代码，但我收到 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>

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

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

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

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

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

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

Answer 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

Answer 3

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

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

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

for angular 10.x import them independently

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

2. 在imports 和exports' 数组中的@NgModule 下添加MatDatepickerModule, MatNativeDateModule:

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

Answer 4

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

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

Answer 5

你只需要导入下面的模块

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

@NgModule ({
  imports: [
    MatDatepickerModule
   ]
  })

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