Angular中使用[checked]="true"设置Checkbox选中状态不生效问题

问题根因 #

• 若Checkbox组件同时绑定了[(ngModel)]/FormControl这类Angular表单API和[checked]属性，表单绑定的状态优先级会高于[checked]的手动设置，因此[checked]="true"不会生效
• 部分Angular生态的第三方UI组件库（如Angular Material）对Checkbox组件做了封装，本身不支持直接通过原生[checked]属性控制选中状态

解决方法 #

方案1：修改表单绑定的变量值（推荐） #

如果你的业务需要用到双向绑定或响应式表单能力，直接修改对应绑定的变量即可控制选中状态，无需额外设置[checked]：

<!-- 错误写法 -->
<mat-checkbox [checked]="true" [(ngModel)]="checkedStatus">测试选项</mat-checkbox>

<!-- 正确写法 -->
<mat-checkbox [(ngModel)]="checkedStatus">测试选项</mat-checkbox>

在组件ts文件中给绑定变量赋初始值即可默认勾选：

checkedStatus = true;

方案2：移除表单绑定，单独用[checked]控制 #

如果不需要表单相关能力，去掉[(ngModel)]/FormControl绑定后，[checked]属性即可正常生效：

<mat-checkbox [checked]="true">测试选项</mat-checkbox>

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