给 checkbox 写了 checked,页面却没有默认选中,问题不一定在 HTML 属性本身。控件一旦由 Angular 表单绑定维护,应该先看模型初值,而不是继续叠加更多 checked 写法。

从静态控件到绑定控件

下面的静态 HTML 可以显示初始选中:

<input type="checkbox" checked>

但如果实际控件还有:

[(ngModel)]="param.check"

那么表单绑定会参与更新控件状态。静态属性不再是唯一的状态来源,应在模型中表达默认值。

把默认选中放进模型

对于模板驱动表单,可以这样组织:

param = {
  check: true
};
<form>
  <label>
    <input type="checkbox" name="check" [(ngModel)]="param.check">
    接收提醒
  </label>
</form>

所在模块或组件需要按项目组织方式导入 FormsModule;表单中的 ngModel 控件还要有相应名称。checkbox 的表单值访问器负责模型与选中状态之间的同步,见 CheckboxControlValueAccessor。

不要同时使用相互冲突的 [checked] 和双向表单绑定维护同一个状态。使用响应式表单时,则应通过 FormControl 的初值和更新方法处理,不再混用 ngModel。

检查类型和赋值时间

接口返回的字符串 "false" 不是布尔值 false。应按接口约定明确转换,不能对任何非空字符串都调用 Boolean(value) 就认为结果正确。

异步加载完成后,如果又把 param 整体替换成另一个对象,初始的 true 也可能被覆盖。排查时查看最终模型值和赋值顺序,而不只是组件创建时那一行。

表单重置同样应明确回到什么默认值。如果业务默认是选中,就在重置时恢复相应布尔值,而不是只修改 DOM 属性。

不混用 AngularJS 的指令

ng-checked 属于 AngularJS 的指令体系,不能把它当成现代 Angular 的通用修复。先确认项目使用哪套框架和表单方式,再对照对应语法。

这个问题的关键不是找到更强的 checked 属性,而是让模型成为清楚、单一的状态来源。