Angular 2 ngModel 双向绑定答案

【问题标题】：Angular 2 ngModel two way bindingAngular 2 ngModel 双向绑定
【发布时间】：2017-04-29 22:50:39
【问题描述】：

我试图测试 Angular2 的双向绑定，但我总是得到这个

错误：无法绑定到“ngModel”，因为它不是“输入”的已知属性。

我该如何解决这个问题？

import { Component } from '@angular/core';


@Component({
  selector: 'impure-pipe',
  template: `<input type="text" [(ngModel)]='a'> <p>{{ a| calcPipe:b}}</p>`
})
export class PipesAppComponent {

  a: number = 2;
  b: number = 2;

}

【问题讨论】：

重复question

标签： angular

【解决方案1】：

正如 Angular 2 网站 Template Syntax 在此页面上所说的那样

在我们可以在双向数据绑定中使用 ngModel 指令之前，我们必须导入 FormsModule 并将其添加到 Angular 模块的导入列表中。在 Forms 章节中了解有关 FormsModule 和 ngModel 的更多信息。

您的app.module.ts 中是否导入了FormsModule？

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
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

【讨论】：

【解决方案2】：

确保导入FormsModule。

【讨论】：

【解决方案3】：

您是否在 app.module.ts 中添加了FormsModule 的定义？

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


@NgModule({
  imports: [
    FormsModule
  ],

【讨论】：