使用ngModel的Angular 2两种方式绑定不起作用

Question

无法绑定到“ 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不同，您可以ngModel在Angular 2中使用指令进行两种方式的数据绑定，但是您需要以一些不同的方式来编写它，例如[(ngModel)]（Banana in a box语法）。现在几乎所有的angular2核心指令都不支持，kebab-case而应该使用camelCase。现在ngModel指令属于FormsModule，这就是为什么您应该import在（NgModule）的元数据选项中使用FormsModulefrom @angular/forms模块。之后，您可以在页面内使用指令。importsAppModulengModelapp / app.component.tsimport { Component } from '@angular/core';@Component({&nbsp; selector: 'my-app',&nbsp; template: `<h1>My First Angular 2 App</h1>&nbsp; &nbsp; <input type="text" [(ngModel)]="myModel"/>&nbsp; &nbsp; {{myModel}}&nbsp; `})export class AppComponent {&nbsp;&nbsp; myModel: any;}app / app.module.tsimport { NgModule }&nbsp; &nbsp; &nbsp; from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { FormsModule } from '@angular/forms';import { AppComponent }&nbsp; &nbsp;from './app.component';@NgModule({&nbsp; imports:&nbsp; &nbsp; &nbsp; [ BrowserModule, FormsModule ], //< added FormsModule here&nbsp; declarations: [ AppComponent ],&nbsp; bootstrap:&nbsp; &nbsp; [ AppComponent ]})export class AppModule { }app / main.tsimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';import { AppModule } from './app.module';const platform = platformBrowserDynamic();platform.bootstrapModule(AppModule);

Answer 2

关键点：仅当FormsModule作为AppModule的一部分可用时，angular2中的ngModel才有效。ng-model 在语法上是错误的。方括号[..]表示属性绑定。圆括号（..）表示事件绑定。当方括号和圆括号放在一起时，[[..]]表示双向绑定，通常称为香蕉盒。因此，修复您的错误。步骤1：导入FormsModuleimport {FormsModule} from '@angular/forms'第2步：将其添加到AppModule的import数组中，作为imports :[ ... , FormsModule ]步骤3：ng-model将香蕉盒更改为ngModel&nbsp;<input id="name" type="text" [(ngModel)]="name" />注意：此外，您也可以分别处理以下两种方式的数据绑定<input id="name" type="text" [ngModel]="name" (ngModelChange)="valueChange($event)"/>valueChange(value){}