Angular Material Datepicker對我不起作用

Question

我試圖使用日期選擇器。 我對復選框或單選按鈕沒有任何問題。 但是當我嘗試添加日期選擇器時，我總是會收到此錯誤：

錯誤：模板解析錯誤：無法綁定到'htmlFor'，因為它不是'md-datepicker-toggle'的已知屬性

在我的app.module.ts文件中：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MdButtonModule, 
    MdCheckboxModule,
    MdCardModule,
    MdRadioModule, 
    MdDatepickerModule } from '@angular/material';

import { AppComponent } from './app.component';
import { WeekControlComponent } from './week-control.component';

@NgModule({
declarations: [
  AppComponent,
  WeekControlComponent
],
imports: [
   BrowserModule, 
   FormsModule,
   MdButtonModule, 
   MdCheckboxModule, 
   MdCardModule, 
   MdRadioModule,
   MdDatepickerModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

我有一個WeekControlComponent：

HTML

 <input mdInput [mdDatepicker]="picker" placeholder="Choose a date"> <md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle> <md-datepicker #picker></md-datepicker> 

TS

  import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-week-control', templateUrl: './week-control.component.html', styleUrls: ['./week-control.component.css'] }) export class WeekControlComponent implements OnInit { constructor() { } ngOnInit() { } } 

我直接從angular.io材質示例頁面復制了示例。 我不明白為什么它不起作用。 有人可以幫我嗎？

Answer 1

如果您使用的是材料版本2.0.0-beta.8，那么您需要進行以下更改： -

1. 替換HTML文件中的代碼

    <md-input-container> <input mdInput [mdDatepicker]="picker" placeholder="Choose a date"> <button mdSuffix [mdDatepickerToggle]="picker"></button> </md-input-container> <md-datepicker #picker></md-datepicker> 

2.在app.module中再添加一個模塊，即MdNativeDateModule

import { MdButtonModule, 
MdCheckboxModule,
MdCardModule,
MdRadioModule, 
MdDatepickerModule, 
MdNativeDateModule   } from '@angular/material';


 imports: [
  BrowserModule, 
FormsModule,
MdButtonModule, 
MdCheckboxModule, 
MdCardModule, 
MdRadioModule,
MdDatepickerModule,
MdNativeDateModule

]

Answer 2

只需安裝最新的角度依賴項。 即

"@angular/animations": "4.3.0",
"@angular/cdk": "^2.0.0-beta.10",
"@angular/common": "4.3.0",
"@angular/compiler": "4.3.0",
"@angular/core": "4.3.0",
"@angular/forms": "4.3.0",
"@angular/http": "4.3.0",
"@angular/material": "^2.0.0-beta.10",
"@angular/platform-browser": "4.3.0",
"@angular/platform-browser-dynamic": "4.3.0",
"@angular/platform-server": "4.3.0",
"@angular/router": "4.3.0"

devDependencies:
"@angular/compiler-cli": "4.3.0"

並測試您的代碼。 這對我來說可以。