web-dev-qa-db-ja.com

'input'の既知のプロパティではないため、 'matDatepicker'にバインドできません-Angular

DatePickerと入力の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>

これは私が私のブラウザで持っているエラーです：

'md'datepicker'は 'input'の既知のプロパティではないため、 'mdDatepicker'にバインドできません。'md-datepicker 'がAngularコンポーネントの場合、このモジュールの一部であることを確認してください。 2.「md-datepicker」がWebコンポーネントの場合、「CUSTOM_ELEMENTS_SCHEMA」をこのコンポーネントの「@ NgModule.schemas」に追加して、このメッセージを抑制します。 （ "[エラー->]

エラーは日付ピッカー用で、削除するとエラーが消えます

angularangular-materialangular-material2
28
edkeveked

mat-datepickerを使用しているときに、MatDatepickerModuleもインポートする必要があります。また、MatNativeDateModuleもインポートすることをお勧めします。 docsここを参照してください。

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の使用は避けてください。

35
Pengyy

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

4
Shailesh Ladumor

アプリケーションでMatDatePickerを使用するには、app.module.tsファイルに次の行を追加します。

  1. app.module.tsにMatDatepickerModule、MatNativeDateModuleをインポートします。

    例えば：

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

  2. インポートおよびエクスポートで@NgModuleの下にMatDatepickerModule、MatNativeDateModuleを追加します。

**

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

**

1
vaishali chaudhari