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

Question

我刚刚复制并粘贴了datePicker和输入的角度材料代码,但是我收到了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'以禁止显示此消息.("[错误 - >]

错误是针对datepicker,当我删除它时,错误消失

Answer 1

使用时mat-datepicker,您也必须导入MatDatepickerModule,也MatNativeDateModule建议也可以导入.看到这里的文档.

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它将来会被弃用.

Answer 2

你需要导入FormsModule，ReactiveFormsModule如果你使用了 NgModule 和 formgroup。所以你的 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

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

1. import MatDatepickerModule，MatNativeDateModule在您的 app.module.ts 中。

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

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

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

2. 在导入和导出数组中的MatDatepickerModule@NgModuleMatNativeDateModule下添加,

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

Answer 4

在最新版本的 Angular Material 中，您必须MatDatepickerModule从@angular/material/datepicker本例中导入，并MatNativeDateModule从@angular/material/core.

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

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