Angular2 稳定版中的 md-input 绑定错误
md-input binding error in Angular2 stable version
我在将 angular2
应用程序升级到稳定版本时遇到了一个常见错误,但 none 提到的解决方案对我有用(这几乎是一个普遍的唯一解决方案)。
在这里:
Template parse errors:
Can't bind to 'placeholder' since it isn't a known property of 'md-input'.
1. If 'md-input' is an Angular component and it has 'placeholder' input, then verify that it is part of this module.
2. If 'md-input' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
我已尝试根据此 and this (相同)导入 FormsModule
,但仍然出现相同的错误。还有其他解决方案吗?
HTML :
<div class="col-lg-10 col-lg-offset-1">
<div class="md-block">
<md-input
id="name"
[ngModel]="xyzStuff?.xyz_name"
placeholder="{{'xyzName' | translate}}"
formControlName="name"
dividerColor="{{getDividerColor(xyzForm.controls.name)}}"
>
</md-input>
</div>
</div>
和 Module file
:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { UIRouterModule } from 'ui-router-ng2';
import { TranslateModule } from 'ng2-translate';
import { ParComponent } from './par.component';
import { XyzSettingsComponent } from './shared/xyz-settings/xyz-settings.component';
@NgModule({
declarations: [
ParComponent,
XyzSettingsComponent
],
imports: [
FormsModule,
BrowserModule,
UIRouterModule,
TranslateModule,
ReactiveFormsModule
],
providers: [],
exports: [
FormsModule,
BrowserModule,
UIRouterModule,
TranslateModule,
ReactiveFormsModule
]
})
export class ParModule {}
有什么帮助吗?
md-input
属于 angular2
material 项目。 Angular 2 Material 是完全不同的插件。您必须确保在 NgModule
的 imports
选项中导入并注入 MaterialModule
。
import { MaterialModule } from '@angular/material';
@NgModule({
declarations: [
...
],
imports: [
...,
MaterialModule.forRoot(), //<-- imported material module here
...
],
providers: [],
exports: [
...
]
})
我强烈建议您完成 Getting started page Angular2 material
Note:
Make sure you should import MaterialModule
in whichever modules component you want to use Angular 2 material
components.
我在将 angular2
应用程序升级到稳定版本时遇到了一个常见错误,但 none 提到的解决方案对我有用(这几乎是一个普遍的唯一解决方案)。
在这里:
Template parse errors:
Can't bind to 'placeholder' since it isn't a known property of 'md-input'.
1. If 'md-input' is an Angular component and it has 'placeholder' input, then verify that it is part of this module.
2. If 'md-input' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
我已尝试根据此 FormsModule
,但仍然出现相同的错误。还有其他解决方案吗?
HTML :
<div class="col-lg-10 col-lg-offset-1">
<div class="md-block">
<md-input
id="name"
[ngModel]="xyzStuff?.xyz_name"
placeholder="{{'xyzName' | translate}}"
formControlName="name"
dividerColor="{{getDividerColor(xyzForm.controls.name)}}"
>
</md-input>
</div>
</div>
和 Module file
:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { UIRouterModule } from 'ui-router-ng2';
import { TranslateModule } from 'ng2-translate';
import { ParComponent } from './par.component';
import { XyzSettingsComponent } from './shared/xyz-settings/xyz-settings.component';
@NgModule({
declarations: [
ParComponent,
XyzSettingsComponent
],
imports: [
FormsModule,
BrowserModule,
UIRouterModule,
TranslateModule,
ReactiveFormsModule
],
providers: [],
exports: [
FormsModule,
BrowserModule,
UIRouterModule,
TranslateModule,
ReactiveFormsModule
]
})
export class ParModule {}
有什么帮助吗?
md-input
属于 angular2
material 项目。 Angular 2 Material 是完全不同的插件。您必须确保在 NgModule
的 imports
选项中导入并注入 MaterialModule
。
import { MaterialModule } from '@angular/material';
@NgModule({
declarations: [
...
],
imports: [
...,
MaterialModule.forRoot(), //<-- imported material module here
...
],
providers: [],
exports: [
...
]
})
我强烈建议您完成 Getting started page Angular2 material
Note: Make sure you should import
MaterialModule
in whichever modules component you want to useAngular 2 material
components.