无法绑定到'ngModel',因为尽管导入了FormsModule,它仍然不是'input'的已知属性

Question

我正在关注MVA的Angular 2教程.我似乎无法让双向绑定工作.我在"无法绑定到'ngModel'中应用了修复,因为它不是'input'的已知属性,但这不起作用.错误如下:

Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
        <p>
            <input [ERROR ->][(ngModel)]="sampleText" ><br/>
            <span>{{sampleText}}</span>
        </p>
"): TasksComponent@2:19 ; Zone: <root> ; Task: Promise.then ;

我的main.ts代码如下:

import { bootstrap } from '@angular/platform-browser-dynamic';
import { Component, OnInit } from '@angular/core';

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


@Component({
    selector: 'tasks',
    template: `
        <p>
            <input [(ngModel)]="sampleText" ><br/>
            <span>{{sampleText}}</span>
        </p>
    `
})
export class TasksComponent implements OnInit {
    sampleText: string = "";
    ngOnInit() {}
}

@Component({
    selector: 'app',
    directives: [TasksComponent],
    template: `
        <h1>Hello World</h1>
        <tasks></tasks>
    `
})
export class AppComponent implements OnInit {
    constructor() {}

    ngOnInit() {}
}

bootstrap(AppComponent);

如果我注释掉双向绑定,代码可以工作.我怎样才能解决这个问题？

Answer 1

你可以在下面使用,

 import { bootstrap } from '@angular/platform-browser-dynamic';
 import { Component, OnInit } from '@angular/core';

 // Import and use below directive
 import { FORM_DIRECTIVES } from '@angular/forms'; 


 @Component({
    selector: 'tasks',
    template: `
     <p>
        <input [(ngModel)]="sampleText" ><br/>
        <span>{{sampleText}}</span>
     </p>
   `
   , directives: [FORM_DIRECTIVES]
 })
 export class TasksComponent implements OnInit {
   sampleText: string = "";

   constructor() {}

   ngOnInit() {}
 }

 @Component({
   selector: 'my-app',
   directives: [TasksComponent],
   template: `
      <h1>Hello World</h1>
      <tasks></tasks>
    `
 })
export class AppComponent implements OnInit {
   constructor() {}

   ngOnInit() {}
}

bootstrap(AppComponent);

这是Plunker !!

但是,您应该考虑使用NgModule,并导入FormsModule其中.

希望这可以帮助!