Angular 2 ngModel双向绑定

时间:2016-12-14 14:47:49

标签: angular

我试图测试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;

}

3 个答案:

答案 0 :(得分:2)

正如Angular 2网站上的Template Syntax页所述

  

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

您是否在FormsModule中导入了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
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

答案 1 :(得分:1)

确保导入FormsModule

答案 2 :(得分:1)

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

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


@NgModule({
  imports: [
    FormsModule
  ],