Angular 角材质日期选择器对我不起作用

Angular 角材质日期选择器对我不起作用,angular,angular-material,Angular,Angular Material,我正在尝试使用日期选择器。我对复选框或单选按钮没有问题。但当我尝试添加日期选择器时,总是会出现以下错误: 错误:模板分析错误: 无法绑定到“htmlFor”,因为它不是“md datepicker toggle”的已知属性 在my app.module.ts文件中: import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { MdButt

我正在尝试使用日期选择器。我对复选框或单选按钮没有问题。但当我尝试添加日期选择器时,总是会出现以下错误:

错误:模板分析错误: 无法绑定到“htmlFor”,因为它不是“md datepicker toggle”的已知属性

在my 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 { }
我有一个WeekControl组件:

HTML
我直接从angular.io材质示例页面复制了该示例。我不明白为什么它不起作用。有人能帮我吗?

请安装最新的angular dependencies。i、 e

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

并测试您的代码。它对我来说很好。

如果您使用的是material version 2.0.0-beta.8,则需要进行以下更改:-

  • 替换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.0.0-beta.8”,当我更新到“2.0.0-beta.10”时,它起了作用,谢谢。当我尝试你的代码时,我得到了一个错误,关于md输入容器无法识别,使用2.0.0-beta.8。当我更新到2.0.0-beta.10时,我得到一个错误,关于按钮没有mdDatepickerToggle可绑定。但是在从angular.io更新官方示例后,该示例开始工作。要使其在angular material-2.0.0-beta.8中工作,请添加“MdInputModule”。对于给定的material版本2.0.0-beta.8,这是可行的解决方案。这对任何像我一样坚持这个物质版本的人都有效。谢谢@Kriti
    "@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"
    
    <md-input-container>
    <input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
    <button mdSuffix [mdDatepickerToggle]="picker"></button>
    </md-input-container>
    <md-datepicker #picker></md-datepicker>
    
    import { MdButtonModule, 
    MdCheckboxModule,
    MdCardModule,
    MdRadioModule, 
    MdDatepickerModule, 
    MdNativeDateModule   } from '@angular/material';
    
    
     imports: [
      BrowserModule, 
    FormsModule,
    MdButtonModule, 
    MdCheckboxModule, 
    MdCardModule, 
    MdRadioModule,
    MdDatepickerModule,
    MdNativeDateModule