使用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不同，您可以ngModel在Angular 2中使用指令进行两种方式的数据绑定，但是您需要以一些不同的方式来编写它，例如[(ngModel)]（Banana in a box语法）。现在几乎所有的angular2核心指令都不支持，kebab-case您应该使用camelCase。

现在ngModel指令属于FormsModule，这就是为什么您应该import在（NgModule）的元数据选项中使用FormsModulefrom @angular/forms模块。之后，您可以在页面内使用指令。importsAppModulengModel

app / 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 / 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 { }

app / main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Demo Plunkr

关键点：

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

2. ng-model 在语法上是错误的。

3. 方括号[..]表示属性绑定。
4. 圆括号（..）表示事件绑定。
5. 当方括号和圆括号放在一起时，[[..]]表示双向绑定，通常称为香蕉盒。

因此，修复您的错误。

步骤1：导入FormsModule

import {FormsModule} from '@angular/forms'

第2步：将其添加到AppModule的import数组中，作为

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像上面建议的那样进行导入。但是，由于删除了kebab-case以便改进，语法已更改。

只需更换ng-model与ngModel和它包装香蕉的箱子。但是，您现在已将代码溅入两个文件中：

应用程式：

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

就我而言，我在输入元素上缺少“名称”属性。

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

总结一下：输入字段现在需要name表单中的属性。

在app.module.ts中

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

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

@NgModule({
imports: [
BrowserModule,
FormsModule
]

})

Angular 2 Beta

该答案适用于那些将Javascript用于angularJS v.2.0 Beta的用户。

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

怎么样？

要使用ngModelangular2 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";
    },

});

在您的AppModule中导入FormsModule以与您的两种方式绑定[（ngModel）]

可以使用以下代码代替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.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 ]
})

希望这可以帮助