角度材料日期选择器不适用于我

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 

]，