[英]Can't bind to 'mdDatepicker' since it isn't a known property of 'input'
I'm trying to make use of Angular Material design, but I keep running into this error 我正在尝试使用Angular Material设计,但我一直遇到这个错误
Can't bind to 'mdDatepicker' since it isn't a known property of 'input'.
I'm following this documentation to install MD. 我正在按照此文档安装MD。
I have imported the following into my app.module.ts 我已将以下内容导入app.module.ts
/* Material Design */
import { MdDatepickerModule, MdNativeDateModule } from "@angular/material";
and added it to @NgModule
并将其添加到
@NgModule
@NgModule({
imports:
[
...
BrowserModule,
BrowserAnimationsModule,
HttpModule,
/* Material Design */
MdDatepickerModule,
MdNativeDateModule,
],
In my component template I just copy pasted the example's code 在我的组件模板中,我只是复制粘贴示例的代码
<md-form-field>
<input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
<md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
<md-datepicker #picker></md-datepicker>
</md-form-field>
I don't do anything special in my component.ts file 我在component.ts文件中没有做任何特殊操作
import { Component, Input, Output, EventEmitter } from "@angular/core";
import { TranslationPipe } from "../../../pipes";
@Component({
selector: "date-picker",
templateUrl: "./date-picker.component.html",
styleUrls: ["./date-picker.component.scss"],
})
export class DatePickerComponent {
@Input()
date;
constructor(
private translationPipe: TranslationPipe,
) {
}
}
I'm stuck here and I can't find any solutions to this. 我被困在这里,我找不到任何解决方案。 The only solution I found was Can't bind to 'mdDatepicker' since it isn't a known property of 'input' - Angular but as you can see I implemented it and it didn't help me.
我找到的唯一解决方案是无法绑定到'mdDatepicker',因为它不是'input'的已知属性 - Angular但是你可以看到我实现了它并且它没有帮助我。
I guessing I'm looking over something, or did I miss a step? 我猜我在看什么,还是我错过了一步?
Thanks in advance 提前致谢
Directives need to be listed in imports: [...]
of the module where they are used. 指令需要在
imports: [...]
中列出imports: [...]
使用它们的模块。
@NgModule({
imports:
[
MdDatepickerModule,
MdNativeDateModule,
]
}
export class SharedModule {
Importing them in AppModule
only makes them available in components listed in directives: [...]
of AppModule
but nowhere else. 在
AppModule
导入它们只能使它们在directives: [...]
中列出的组件中可用directives: [...]
AppModule
而不是其他地方。
With the new version of angular4 datepicker, the syntax was changed to the below code: 使用新版本的angular4 datepicker,语法更改为以下代码:
Starting of DatePicker Module: DatePicker模块的启动:
<mat-input-container>
<input matInput [matDatepicker]="picker" placeholder="Choose A Date:"><br/><br/>
<mat-datepicker-toggle mdSuffix [for]="picker"></mat-datepicker-toggle>
</mat-input-container>
<mat-datepicker #picker></mat-datepicker>
This worked for me and was able to see the output in the UI. 这对我有用,并且能够在UI中看到输出。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.