使用ngModel Angular 2的双向绑定不起作用

无法绑定到'ngModel'，因为它不是“input”元素的一个已知属性，并且没有相应的指令与相应的属性

注意：即时通讯使用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); 

Answer 1

Angular于9月15日发布了最终版本。 与Angular 1不同，您可以在Angular 2中使用ngModel指令进行双向数据绑定，但是您需要以与[(ngModel)] （ Banana in a box syntax ）中的不同方式进行编写。 现在几乎所有的angular2核心指令都不支持kebab kebab-case而应该使用camelCase 。

现在ngModel指令属于FormsModule ，这就是为什么你应该从@angular/forms模块imports AppModule （NgModule）的元数据选项imports AppModule原因。 此后，您可以在页面中使用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); 

演示Plunkr

Answer 2

关键点：

1. 仅当FormsModule作为AppModule的一部分可用时，angular2中的ngModel才有效。

2. ng-model是合成错误的。

3. 方括号[..]是指属性绑定。
4. 圆括号（..）是指事件绑定。
5. 当方括号和圆括号放在一起时，[（..）]是指双向装订，俗称香蕉盒。

所以，要解决你的错误。

第1步：导入FormsModule

 import {FormsModule} from '@angular/forms' 

第2步：将它添加到您的AppModule的导入数组中

 imports :[ ... , FormsModule ] 

第3步：将 ng-model改为香蕉盒的ngModel

  <input id="name" type="text" [(ngModel)]="name" /> 

注意：另外，您可以单独处理双向数据绑定以及下面的数据绑定

 <input id="name" type="text" [ngModel]="name" (ngModelChange)="valueChange($event)"/> valueChange(value){ } 

Answer 3

根据Angular2 final，你甚至FORM_DIRECTIVES按照上面的build议导入FORM_DIRECTIVES 。 但是，由于kebab-case为了改善而被删除 ，语法已经改变。

只需用ngModelreplaceng-model并将其包装在一盒香蕉中即可 。 但是你现在已经把代码分成两个文件了：

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); 

Answer 4

Angular 2 Beta

这个答案适用于使用Javascript for angularJS v.2.0 Beta的人。

要在你的视图中使用ngModel ，你应该告诉angular的编译器你正在使用一个名为ngModel的指令。

怎么样？

要使用ngModel ，在angular2 Beta中有两个库，它们是ng.common.FORM_DIRECTIVES和ng.common.NgModel 。

实际上ng.common.FORM_DIRECTIVES只不过是在创build表单时很有用的一组指令。 它也包括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"; }, }); 

Answer 5

帮助我的答案： 指令[（ngModel）] =在rc5中不再工作

综上所述：input字段现在需要属性name的forms。

Answer 6

而不是ng-model，你可以使用这个代码：

 import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `<input #box (keyup)="0"> <p>{{box.value}}</p>`, }) export class AppComponent {} 

在你的app.component.ts中

Answer 7

在app.module.ts中

 import { FormsModule } from '@angular/forms'; 

稍后在@NgModule装饰器的导入中：

 @NgModule({ imports: [ BrowserModule, FormsModule ] })