Angular中checked属性与ngModel共存时默认选中失效问题排查

嘿，这个问题我之前做Angular表单的时候也踩过坑！咱们来拆解一下原因和解决办法：

问题根源 #

当你给单选框加上ngModel的时候，Angular的表单控件会由ngModel接管状态管理，这时候你手动设置的[checked]属性会被ngModel的状态直接覆盖掉。

你当前的代码里，ngModel没有绑定任何初始值（相当于初始值是undefined），所以哪怕你写了[checked]="gender==='male'"，ngModel也会把控件状态重置为未选中，导致默认选中失效。而去掉ngModel后，浏览器就会按照原生的checked属性来渲染，所以"male"能正常选中。

两种解决方案 #

1. 给ngModel绑定初始值（推荐）

这是最符合Angular表单逻辑的做法：在组件的TS文件里定义一个变量，设置初始值为'male'，然后用双向绑定[(ngModel)]关联它，同时去掉多余的[checked]属性。

组件TS代码：

// 定义绑定变量，初始设为'male'
selectedGender = 'male';
// 你的性别选项数组
genders = ['male', 'female'];

模板HTML代码：

<div class="radio" *ngFor="let gender of genders">
  <label>
    <input type="radio" name="gender" [(ngModel)]="selectedGender" [value]="gender" />
    {{gender}}
  </label>
</div>

这里注意把循环变量和绑定变量区分开（比如用selectedGender作为绑定变量），避免变量名冲突导致的问题。

2. 单向绑定ngModel并设置初始值

如果不需要双向绑定（比如只是展示默认选中，不需要后续修改），可以直接给[ngModel]赋值初始值，同样不需要[checked]：

<div class="radio" *ngFor="let gender of genders">
  <label>
    <input type="radio" name="gender" [ngModel]="'male'" [value]="gender" />
    {{gender}}
  </label>
</div>

总结 #

Angular的表单控件状态优先由ngModel管理，原生的checked属性会被覆盖，所以一定要通过ngModel的初始值来设置默认选中状态，而不是混用[checked]和ngModel。

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