角度绑定错误 - 无法绑定到“ngModel”，因为它不是“输入”的已知属性，即使该属性存在

Question

我创建了一个组件类，如下所示，我正在尝试将类字段绑定到模板，但我看到以下错误

src/app/admin/projects/projects.component.html:41:34 中的错误 - 错误 NG8002：无法绑定到“ngModel”，因为它不是 '输入'。 name="ProjectID" [(ngModel)]="newProject.projectID">

组件ProjectsComponent的模板发生错误。 src/app/admin/projects/projects.component.html:49:36 - 错误 NG8002： 无法绑定到“ngModel”，因为它不是“输入”的已知属性。 name="ProjectName" [(ngModel)]="newProject.projectName"> src/app/admin/projects/projects.component.ts:7:16 templateUrl: './projects.component.html',

  export class ProjectsComponent implements OnInit {

  projects : Project[];
  newProject : Project = new Project();
  constructor(private projectSevice : ProjectsService) {

   }

我正在尝试将项目属性绑定到模板，如下所示。

 <div class="form-group row">
            <label for="txtNewProjectID" class="col-sm-4 col-form-label">Project ID</label>
            <div class="col-sm-8">
              <input type="text" id="txtNewProjectID" style="width:100px" class="form-control" placeholder="Project ID"
                name="ProjectID" [(ngModel)]="newProject.projectID">
            </div>
          </div>

          <div class="form-group row">
            <label for="txtNewProjectName" class="col-sm-4 col-form-label">Project Name</label>
            <div class="col-sm-8">
              <input type="text" id="txtNewProjectName" class="form-control" placeholder="Project Name"
                name="ProjectName" [(ngModel)]="newProject.projectName">
            </div>
          </div>

下面是项目类

export class Project {

    projectID: number;
    projectName: string;
    dateOfStart: string;
    teamSize: number;

    constructor(){
        this.projectID = 0;
        this.projectName = null;
        this.dateOfStart = null;
        this.teamSize = 0;
    }
}

我无法弄清楚我犯了什么错误

Answer 1

为了在 Angular 中使用 ngModel 指令和通用数据绑定，您需要首先在模块中导入 Angular 的 FormsModule。

为此，请了解您的组件包含的模块。然后在导入列表中添加 FormsModule。

例如，您可以将其导入 app.module.ts：

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    NgbModule,
    FormsModule // Insert here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

确保将其添加到模块文件的顶部：

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