无法绑定到 'mdDatepicker',因为它不是 'input' 的已知 属性
Can't bind to 'mdDatepicker' since it isn't a known property of 'input'
我正在尝试使用 Angular Material 设计,但我一直 运行 进入此错误
Can't bind to 'mdDatepicker' since it isn't a known property of 'input'.
我正在按照 this documentation 安装 MD。
我已将以下内容导入我的 app.module.ts
/* Material Design */
import { MdDatepickerModule, MdNativeDateModule } from "@angular/material";
并将其添加到 @NgModule
@NgModule({
imports:
[
...
BrowserModule,
BrowserAnimationsModule,
HttpModule,
/* Material Design */
MdDatepickerModule,
MdNativeDateModule,
],
在我的组件模板中,我只是复制粘贴了示例代码
<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>
我没有在我的 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,
) {
}
}
我被困在这里,找不到任何解决方案。我找到的唯一解决方案是 ,但如您所见,我实施了它,但对我没有帮助。
我猜我正在查看某些内容,还是我错过了一步?
提前致谢
指令需要在使用它们的模块的 imports: [...]
中列出。
@NgModule({
imports:
[
MdDatepickerModule,
MdNativeDateModule,
]
}
export class SharedModule {
在 AppModule
中导入它们只会使它们在 AppModule
的 directives: [...]
中列出的组件中可用,而不会在其他地方使用。
使用新版本的angular4 datepicker,语法更改为以下代码:
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>
这对我有用,并且能够在 UI 中看到输出。
我正在尝试使用 Angular Material 设计,但我一直 运行 进入此错误
Can't bind to 'mdDatepicker' since it isn't a known property of 'input'.
我正在按照 this documentation 安装 MD。
我已将以下内容导入我的 app.module.ts
/* Material Design */
import { MdDatepickerModule, MdNativeDateModule } from "@angular/material";
并将其添加到 @NgModule
@NgModule({
imports:
[
...
BrowserModule,
BrowserAnimationsModule,
HttpModule,
/* Material Design */
MdDatepickerModule,
MdNativeDateModule,
],
在我的组件模板中,我只是复制粘贴了示例代码
<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>
我没有在我的 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,
) {
}
}
我被困在这里,找不到任何解决方案。我找到的唯一解决方案是
我猜我正在查看某些内容,还是我错过了一步?
提前致谢
指令需要在使用它们的模块的 imports: [...]
中列出。
@NgModule({
imports:
[
MdDatepickerModule,
MdNativeDateModule,
]
}
export class SharedModule {
在 AppModule
中导入它们只会使它们在 AppModule
的 directives: [...]
中列出的组件中可用,而不会在其他地方使用。
使用新版本的angular4 datepicker,语法更改为以下代码:
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>
这对我有用,并且能够在 UI 中看到输出。