Question

我收到了Can't bind to 'ngModel' since it isn't a known property of 'input'.错误，但我导入了FormsModule。

的package.json：

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

在主app.module中：

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。

的其他属性。

有关ngModel的详细信息，请查看此https://angular.io/docs/ts/latest/api/forms/index/NgModel-directive.html。

Answer 2

不能确切地说出它做了什么，但我完全重构了，问题就解决了。

我没有在路由定义中使用组件，而是使用了loadChildren：

{ path: 'new-project', loadChildren: () => System.import('./new-project/new-project.module') },

拉入模块。在模块中，我确保导入FormsModule：

import { FormsModule } from '@angular/forms';
...
@NgModule({
  imports: [CommonModule, NgaModule, FormsModule, routing],

现在，angular正在为表单模板找到NgModel。

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

2 个答案: