Angular 2：即使导入了 FormsModule，也无法绑定到“ngModel”

Question

Can't bind to 'ngModel' since it isn't a known property of 'input'.尽管我已经导入了FormsModule.

包.json：

"@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "^2.0.0",

在主应用程序模块中：

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
...
@NgModule({
  bootstrap: [App],
  declarations: [
    App
  ],
  imports: [ // import Angular's modules
    BrowserModule,
    HttpModule,
    RouterModule,
    FormsModule,
    ReactiveFormsModule,
    NgaModule,
    PagesModule,
    routing
  ]

这是我路由到组件的位置（pages.routes.ts）：

import { NewProjectModule, BasicForm } from './new-project/new-project.module';
...
{ path: 'new-project', component: BasicForm },

这是组件模块：

import { FormsModule } from '@angular/forms';
...
import { BasicForm } from './basicForm.component';
...
export { BasicForm } from './basicForm.component';

@NgModule({
  imports: [CommonModule, FormsModule, BrowserModule],
  exports: [BasicForm],
  declarations: [BasicForm]
})
export default class NewProjectModule {
}

还将 FormsModule 导入到组件中只是为了更好的措施：

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

@Component({
  selector: 'basic-form',
  template: `
<input type="text" class="form-control" id="directory" placeholder="C:\Users\Matt\Documents\Projects" [(ngModel)]="project.directory">
  `
})

上面的模板行抛出错误。

Answer 1

ngModel 是一个 angular2 指令，该指令可以单独使用，也可以作为更大表单的一部分。您所需要的只是 ngModel 选择器来激活它。

所以不需要导入

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

我认为你的语法是正确的。

只需尝试导入以下包

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

如果它仍然不起作用，只需像这样更改模板

<input type="text" class="form-control" id="directory" [value]="project.directory">
{{project.directory}}

或者

<input type="text"[(ngModel)]="project.directory">
    {{project.directory}}

如果仍然存在错误，则问题出在“project.directory”或“input.directory”的某些其他属性上。

通过此https://angular.io/docs/ts/latest/api/forms/index/NgModel-directive.html了解有关 ngModel 的详细信息。