無法綁定到“matDatepicker”，因為它不是“input”的已知屬性 - Angular

Question

我剛剛復制並粘貼了 datePicker 和 input 的角度材質代碼，但是我收到了 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' 以抑制此消息。 (" [錯誤 ->]

錯誤是針對日期選擇器的，當我刪除它時，錯誤消失了

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

如果你使用了 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. 在MatNativeDateModule中導入MatDatepickerModule 、 MatNativeDateModule 。

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

對於 angular 10.x 獨立導入它們

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

2. 添加MatDatepickerModule ， MatNativeDateModule在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

在角材料的最新版本，你必須進口MatDatepickerModule從@angular/material/datepicker在這種情況下，並MatNativeDateModule從@angular/material/core 。

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

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