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

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

关键点:

  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){ } 

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

Angular 2 Beta

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

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

怎么样?

要使用ngModel ,在angular2 Beta中有两个库,它们是ng.common.FORM_DIRECTIVESng.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"; }, }); 

帮助我的答案: 指令[(ngModel)] =在rc5中不再工作

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

而不是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中

在app.module.ts中

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

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

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