无法绑定到' ngModel'因为它不是“输入”的已知属性。元素并没有匹配的指令与相应的属性
注意:即时通讯使用alpha.31
import { Component, View, bootstrap } from 'angular2/angular2'
@Component({
selector: 'data-bind'
})
@View({
template:`
<input id="name" type="text"
[ng-model]="name"
(ng-model)="name = $event" />
{{ name }}
`
})
class DataBinding {
name: string;
constructor(){
this.name = 'Jose';
}
}
bootstrap(DataBinding);
答案 0 :(得分:124)
Angular已于9月15日发布最终版本。与Angular 1不同,您可以在Angular 2中使用extension String {
var wordList:[String] {
return "".join(componentsSeparatedByCharactersInSet(NSCharacterSet.punctuationCharacterSet())).componentsSeparatedByString(" ")
}
var first: String {
return String(self[startIndex])
}
var last: String {
return String(self[endIndex.predecessor()])
}
var scrambleMiddle: String {
if count(self) < 4 { //'(String) -> _' is not identical to 'Int'
return self
}
return first + String(Array(dropLast(dropFirst(self))).shuffled) + last //Type 'String' does not conform to protocol 'Sliceable'
}
}
指令进行双向数据绑定,但是您需要以与ngModel
不同的方式编写它( Banana in a box syntax )。现在,几乎所有angular2核心指令都不支持[(ngModel)]
,而应使用kebab-case
。
现在
camelCase
指令属于ngModel
,这就是FormsModule
来自import
FormsModule
模块@angular/forms
内部imports
元数据选项的原因AppModule
{1}}(NgModule)。此后,您可以在页面内使用ngModel
指令。
应用/ app.component.ts 强>
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<h1>My First Angular 2 App</h1>
<input type="text" [(ngModel)]="myModel"/>
{{myModel}}
`
})
export class AppComponent {
myModel: any;
}
应用/ app.module.ts 强>
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule, FormsModule ], //< added FormsModule here
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
应用/ main.ts 强>
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
答案 1 :(得分:32)
要点:
angular2中的ngModel才有效。
module: commonjs
在语法上是错误的。
所以,要解决你的错误。
第1步:导入FormsModule
ng-model
第2步:将其添加到AppModule的导入数组中
import {FormsModule} from '@angular/forms'
第3步:将imports :[ ... , FormsModule ]
更改为带有香蕉盒的ngModel
ng-model
注意:另外,您可以单独处理双向数据绑定以及
<input id="name" type="text" [(ngModel)]="name" />
答案 2 :(得分:8)
根据Angular2 final,您甚至不必按照上面的建议导入FORM_DIRECTIVES
。但是,语法已更改为kebab-case was dropped以获得更好的效果。
只需将ng-model
替换为ngModel
,然后将其换成a box of bananas。但是你现在已经将代码分成两个文件了:
<强> app.ts:强>
import { Component } from '@angular/core';
@Component({
selector: 'ng-app',
template: `
<input id="name" type="text" [(ngModel)]="name" />
{{ name }}
`
})
export class DataBindingComponent {
name: string;
constructor() {
this.name = 'Jose';
}
}
<强> app.module.ts:强>
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DataBindingComponent } from './app'; //app.ts above
@NgModule({
declarations: [DataBindingComponent],
imports: [BrowserModule, FormsModule],
bootstrap: [DataBindingComponent]
})
export default class MyAppModule {}
platformBrowserDynamic().bootstrapModule(MyAppModule);
答案 3 :(得分:3)
Angular 2 Beta
此答案适用于对于angularJS v.2.0 Beta使用 Javascript 的人。
要在视图中使用ngModel
,您应该告诉角度编译器您正在使用名为ngModel
的指令。
如何吗
要使用ngModel
,angular2 Beta中有两个库,它们是ng.common.FORM_DIRECTIVES
和ng.common.NgModel
。
实际上ng.common.FORM_DIRECTIVES
只是一组指令,在创建表单时非常有用。它还包括NgModel
指令。
app.myApp = ng.core.Component({
selector: 'my-app',
templateUrl: 'App/Pages/myApp.html',
directives: [ng.common.NgModel] // specify all your directives here
}).Class({
constructor: function () {
this.myVar = {};
this.myVar.text = "Testing";
},
});
答案 4 :(得分:2)
在app.module.ts
中import { FormsModule } from '@angular/forms';
后来在@NgModule装饰器的导入中:
@NgModule({
imports: [
BrowserModule,
FormsModule
]
})
答案 5 :(得分:2)
注意:为了让 ngModel 独立存在于响应式表单中,我们必须使用 ngModelOptions 如下:
[ngModelOptions]="{ standalone: true }"
例如:
<mat-form-field appearance="outline" class="w-100">
<input
matInput
[(ngModel)]="accountType"
[ngModelOptions]="{ standalone: true }"
/>
</mat-form-field>
答案 6 :(得分:1)
帮助我的答案: The directive [(ngModel)]= not working anymore in rc5
总结一下:输入字段现在需要表单中的属性name
。
答案 7 :(得分:0)
代替ng-model,您可以使用此代码:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<input #box (keyup)="0">
<p>{{box.value}}</p>`,
})
export class AppComponent {}
答案 8 :(得分:0)
将以下代码添加到以下文件中。
app.component.ts
<input type="text" [(ngModel)]="fname" >
{{fname}}
export class appcomponent {
fname:any;
}
app.module.ts
import {FormsModule} from '@angular/forms';
@NgModule({
imports: [ BrowserModule,FormsModule ],
declarations: [ AppComponent],
bootstrap: [ AppComponent ]
})
希望这会有所帮助
答案 9 :(得分:0)
就我而言,我在输入元素上缺少“名称”属性。
答案 10 :(得分:0)
在您的AppModule中导入FormsModule以与您的
进行两种方式绑定[[ngModel)]答案 11 :(得分:0)
对于较新版本的angular-
2。在.ts文件中声明一个名为yourSearch的空变量(属性)
将app.module.ts文件中的FormsModule添加到-'@ angular / forms';
如果您的应用程序正在运行,请在对其module.ts文件进行更改后重新启动它
答案 12 :(得分:0)
这些东西缺失/错误:
[(ngModel)]="modelName"
这样,它会正常工作!