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

【问题标题】：Angular 2 two way binding using ngModel is not working使用 ngModel 的 Angular 2 双向绑定不起作用
【发布时间】：2015-10-15 21:56:31
【问题描述】：

无法绑定到“ngModel”，因为它不是“输入”元素的已知属性，并且没有具有相应属性的匹配指令

注意：我使用的是 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);

【问题讨论】：

标签： data-binding typescript angular 2-way-object-databinding

【解决方案1】：

Angular 已于 9 月 15 日发布了其最终版本。与 Angular 1 不同，您可以在 Angular 2 中使用 ngModel 指令进行双向数据绑定，但您需要以类似于 [(ngModel)] 的方式编写它（Banana in a box syntax）。现在几乎所有 angular2 核心指令都不支持kebab-case，而应该使用camelCase。

现在ngModel 指令属于FormsModule，这就是为什么你应该import FormsModule 来自@angular/forms 模块内的imports AppModule(NgModule) 元数据选项。此后，您可以在页面上使用 ngModel 指令。

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

【讨论】：

【解决方案2】：

要点：

angular2 中的 ngModel 仅当 FormsModule 作为 AppModule 的一部分时才有效。
ng-model 语法错误。
方括号 [..] 指的是属性绑定。
圆括号 (..) 指的是事件绑定。
当方括号和圆括号放在一起时，[(..)] 指的是双向绑定，通常称为香蕉盒。

所以，修复你的错误。

第 1 步： 导入 FormsModule

import {FormsModule} from '@angular/forms'

第 2 步： 将其添加到您的 AppModule 的导入数组中

imports :[ ... , FormsModule ]

第三步：将ng-model改成ngModel，香蕉盒改成

 <input id="name" type="text" [(ngModel)]="name" />

注意：另外，您可以分别处理两种方式的数据绑定以及以下

<input id="name" type="text" [ngModel]="name" (ngModelChange)="valueChange($event)"/>

valueChange(value){

}

【讨论】：

【解决方案3】：

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

【讨论】：

天哪！谢谢。

【解决方案4】：

根据 Angular2 final，您甚至不必像上面许多人建议的那样导入 FORM_DIRECTIVES。但是，为了更好，语法已更改为kebab-case was dropped。

只需将ng-model 替换为ngModel 并将其包装在a box of bananas 中。但是您现在已将代码溢出到两个文件中：

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

【讨论】：

【解决方案5】：

对我有帮助的答案： The directive [(ngModel)]= not working anymore in rc5

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

【讨论】：

是的，我遇到了同样的问题。我将名称属性放入输入并工作
到底是什么鬼？为什么它甚至需要那个属性？这对我来说是最出乎意料的解决方案。

【解决方案6】：

在 app.module.ts 中

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

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

@NgModule({
imports: [
BrowserModule,
FormsModule
]

})

【讨论】：

【解决方案7】：

Angular 2 测试版

此答案适用于那些使用 Javascript 进行 angularJS v.2.0 Beta 的人。

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

怎么做？

要使用ngModel，angular2 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";
    },

});

【讨论】：

仅供参考 NgModel 在 FORM_DIRECTIVES 中，因此您还可以：指令：[ng.common.FORM_DIRECTIVES]
@PeterJ.Hart，实际上ng.common.NgModel 包含指令ngModel 的定义。 ng.common.FORM_DIRECTIVES 正在对一些指令进行分组，包括 ngModel，这些指令在表单中很有用。所以我们不想包含表单的每一个指令，只包含ng.common.FORM_DIRECTIVES

【解决方案8】：

注意：为了让 ngModel 独立存在于响应式表单中，我们必须使用 ngModelOptions 如下：

 [ngModelOptions]="{ standalone: true }"

例如：

 <mat-form-field appearance="outline" class="w-100">
            <input
              matInput 
              [(ngModel)]="accountType"
              [ngModelOptions]="{ standalone: true }"
            />
 </mat-form-field>

【讨论】：

【解决方案9】：

这些东西不见了/错了：

在模块的导入数组中导入 FormsModule（ngModel 需要 FormsModule）
ngModel 写成：[(ngModel)]="modelName"

这样，它就可以正常工作了！

【讨论】：

【解决方案10】：

您可以使用以下代码代替 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 中

【讨论】：

【解决方案11】：

将以下代码添加到以下文件中。

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

希望对你有帮助

【讨论】：

【解决方案12】：

在您的 AppModule 中导入 FormsModule 以使用两种方式绑定 [(ngModel)] 与您的

【讨论】：

如果可能，请努力提供额外的解释，而不仅仅是代码。此类答案往往更有用，因为它们可以帮助社区成员，尤其是新开发人员更好地理解解决方案的推理，并有助于避免需要解决后续问题。

【解决方案13】：

对于较新版本的 Angular：

-写成[(ngModel)] = yourSearch
在.ts 文件中声明一个名为yourSearch 的空变量（属性）
在app.module.ts 文件中添加FormsModule - @angular/forms;
如果您的应用程序正在运行，则在您对其module.ts 文件进行更改时重新启动它

【讨论】：

【解决方案14】：

如果你使用延迟加载模块，你需要在当前模块中导入ngModule和formModule。示例：

//shared.module.ts
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms'

imports: [
    FormsModule,]

【讨论】：