Angular Material Datepicker 不适合我

标签 angular angular-material

我正在尝试使用日期选择器。我对复选框或单选按钮没有任何问题。但是当我尝试添加日期选择器时,我总是收到此错误:

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:

超文本标记语言
<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 Material 示例页面复制了该示例。我不明白为什么它不起作用。有人可以帮我吗?

最佳答案

如果您使用 Material 版本 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

],

关于Angular Material Datepicker 不适合我,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46184104/

相关文章:

angular2 $routeChangeStart,$routeChangeSuccess,$routeChangeError

angular - 在上下文之外访问 ngFor 局部变量

以逗号作为分隔符的 Angular Material 芯片输入不允许 '<'(小于)

angularjs - 我可以在cordova中使用angular-material吗?

angular - NullInjectorError : No provider for InjectionToken MatDialogData

Angular 多重错误处理程序

Angular 模板 : How to display the row item as a normal table row

node.js - @angular-cli 安装失败,request@2.88.2 : request has been deprecated (mac) 已弃用

angular - 有条件地应用指令

javascript - 如何在一个时间间隔内更改垫进度条值?