Невозможно связать с "matDatepicker", так как это не известное свойство "input" - Angular

Я только что скопировал и вставил angular код материала для 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" является веб-компонентом, добавьте "CUSTOM_ELEMENTS_SCHEMA" в "@NgModule.schemas" этого компонента для подавления этого сообщения. (" [ОШИБКА → ]

Ошибка для datepicker, когда я ее удалял, ошибки исчезают

Ответы

Ответ 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 поскольку в будущем он будет устаревшим.

Ответ 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

Ответ 3

Чтобы использовать MatDatePicker в приложении, добавьте следующую строку в файл app.module.ts:

  1. импортируйте MatDatepickerModule, MatNativeDateModule в ваш app.module.ts.

    Например:

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

  2. Добавьте MatDatepickerModule, MatNativeDateModule uner @NgModule в импорт и экспорт:

**

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

**