Angular双向绑定与事件绑定失效问题求助

一、双向绑定失效核心修复步骤 #

• 必须在模块中导入FormsModule：
  Angular的[(ngModel)]双向绑定依赖FormsModule，不管是根组件还是子组件，都要在所属模块（一般是AppModule）里导入并声明：

  // app.module.ts
  import { FormsModule } from '@angular/forms';
  
  @NgModule({
    imports: [
      BrowserModule,
      FormsModule // 这行是双向绑定生效的关键，别漏加
    ],
    declarations: [AppComponent, HeroesComponent],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

• 检查绑定属性的可见性：
  组件类中用于双向绑定的属性必须是公共属性（Angular默认是public，不用特意加，但别手动设为private），比如：

  // heroes.component.ts
  export class HeroesComponent {
    heroName = ''; // 供模板绑定的公共属性
    heroAge = 25;
  }
  

  模板里的语法要对应：

  <input [(ngModel)]="heroName" placeholder="英雄名称">
  

二、事件绑定失效排查要点 #

• 检查事件处理方法的访问权限：
  组件里写的点击事件方法不能是private，否则模板调用不到，比如：

  // heroes.component.ts
  // 正确写法（默认public，可省略）
  sayHello() {
    alert('Hello 英雄！');
  }
  
  // 错误写法：private会导致绑定失效
  // private sayHello() { ... }
  

• 核对模板中的事件语法：
  确保事件名（比如click）和方法名没有拼写错误，比如：

  <!-- 正确写法 -->
  <button (click)="sayHello()">Hello按钮</button>
  

三、针对你的场景额外检查 #

• 确认HeroesComponent已在AppModule的declarations里注册，且app.component.html中调用组件的标签和组件的selector一致：

  <!-- app.component.html -->
  <app-heroes></app-heroes> <!-- 要和HeroesComponent里@Component的selector完全匹配 -->
  

• 如果你AppComponent里的双向绑定也失效，同样检查AppModule是否导入了FormsModule，根组件的双向绑定也依赖这个模块。

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