Angular：如何通过[(ngModel)]实现页面加载时复选框默认未选中

嘿，这个问题我之前踩过坑！其实完全不用去操作DOM——Angular是数据驱动的框架，直接从绑定的模型值入手才是正确的解决方式。

问题根源 #

你用[(ngModel)]绑定复选框后，它的选中状态完全由model.test的值决定：

• 如果model.test是布尔值true，复选框会被选中；
• 如果你的复选框设置了value="1"，当model.test等于"1"时，也会自动选中。

你之前在ngOnInit里操作DOM没生效，是因为Angular的变更检测机制：ngOnInit执行后，Angular会根据模型值重新同步DOM状态，覆盖你手动修改的checked属性。

正确解决方案 #

直接在组件类里初始化model.test为未选中对应的取值即可：

情况1：布尔值绑定（不依赖value属性）

如果你的复选框是用布尔值控制选中状态，把model.test初始化为false：

export class YourComponent {
  // 初始化模型，让复选框默认未选中
  model = { test: false };

  ngOnInit() {
    // 不需要操作任何DOM元素！
  }
}

情况2：值绑定（依赖value属性）

如果你的复选框通过value="1"来传递选中值，把model.test初始化为不匹配"1"的值（比如''、undefined或null）：

export class YourComponent {
  // 初始值设为空，确保和value="1"不匹配
  model = { test: '' };

  ngOnInit() {
    // 同样不需要操作DOM
  }
}

额外提示 #

如果你的model数据是从后端接口获取的，记得在拿到数据后，手动把model.test设置为false或空值，这样Angular的变更检测会自动更新复选框状态，确保它默认未选中。

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