已导入FormsModule仍出现Angular输入绑定编译错误

以下是针对报错“can't bind to ng-model since it is not a known property of input”的排查和解决步骤：

• 修正ngModel的拼写格式
  Angular中双向绑定的指令是驼峰命名的[(ngModel)]，而非短横线形式的[(ng-model)]，这是最常见的错误点。修正后的HTML代码：

  <input type="text" [(ngModel)]="test">
  

• 确认FormsModule的正确导入
  确保在app.module.ts中导入FormsModule并添加到imports数组内，代码示例：

  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { FormsModule } from '@angular/forms';
  import { AppComponent } from './app.component';
  
  @NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, FormsModule],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

• 检查组件类中属性的定义
  在app.component.ts中确保test属性已正确声明并初始化，避免未定义导致的隐性问题：

  import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
  })
  export class AppComponent {
    test: string = '';
  }
  

• 重启开发服务器
  完成上述修改后，重启ng serve命令，确保Angular重新编译并识别模块导入和代码变更。

内容的提问来源于stack exchange，提问作者VegDork