角度材料日期選擇器不適用於我

Question

我試圖使用日期選擇器。我對複選框或單選按鈕沒有任何問題。但是，當我嘗試並添加日期選擇器，我總是得到這個錯誤：

Error: Template parse errors: Can't bind to 'htmlFor' since it isn't a known property of '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() { 
    } 
    } 

我COPIE d直接從angular.io材質示例頁面查看示例。我不明白爲什麼它不工作。有人可以幫我嗎？

Answer 1

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

"@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" 

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

Answer 2

如果您使用的材料版本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 

]，