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

Question

无法绑定到“ ngModel”，因为它不是“ input”元素的已知属性，并且没有与相应属性匹配的指令注意：即时通讯使用alpha.31import { 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

关键点：

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

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

方括号[..]表示属性绑定。

圆括号（..）表示事件绑定。

当方括号和圆括号放在一起时，[[..]]表示双向绑定，通常称为香蕉盒。

因此，修复您的错误。

步骤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){

}