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

Question

无法绑定到“ngModel”，因为它不是“input”元素的know属性，并且没有与相应属性匹配的指令

注意：我使用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

在我的例子中，我的输入元素缺少一个“name”属性。

Answer 2

要点：

>

angular2中的ngModel只有在FormsModul作为AppModul的一部分可用时才有效。

ng模型语法错误。

所以，要修正你的错误。

步骤1：导入FormsModule

import {FormsModule} from '@angular/forms'

步骤2：将其添加到AppModule的imports数组中

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

Angular于9月15日发布了最终版本。与Angular 1不同，您可以在Angular 2中使用ngModel指令进行双向数据绑定，但您需要以稍微不同的方式编写它，如[（ngModel）]（香蕉盒子语法）。几乎所有angular2核心指令都不支持kebab案例，现在您应该使用camelCase。

现在ngModel指令属于FormsModule，这就是为什么你应该导入FormsModule从@角/形式模块里面的导入元数据选项的AppModule（NgModule）...此后，您可以在页面上使用ngModel指令。

应用程序/应用程序。组成部分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);

演示弹