Angular 2如何默认选中值为0的单选按钮？[checked]属性无效

嘿，我懂你碰到的这个小麻烦啦！在Angular里用[(ngModel)]绑定单选按钮的时候，直接加[checked]='true'确实不会生效——因为ngModel会接管单选按钮的选中状态，手动设置的checked属性会被它直接覆盖掉。

正确的解决思路 #

你完全不用依赖checked属性，只要在组件类里把绑定的变量unitTrustsPnl初始值设为0，ngModel就会自动帮你选中对应值的单选按钮。

第一步：在组件类里初始化变量

// 你的组件.ts文件中
unitTrustsPnl = 0; // 把初始值设为0，对应第一个单选按钮的value

第二步：修改模板代码，移除多余的checked属性

<input type="radio" name="unitTrusts-pnl" id="unitTrusts-pnl0" class="with-gap" [value]="0" [(ngModel)]="unitTrustsPnl">
<input type="radio" name="unitTrusts-pnl" id="unitTrusts-pnl1" class="with-gap" [value]="1" [(ngModel)]="unitTrustsPnl">

为什么这样可行？ #

Angular的[(ngModel)]双向绑定会自动根据变量值匹配单选按钮：当unitTrustsPnl等于0时，它会找到[value]="0"的单选按钮并将其设为选中状态，完美实现默认选中的需求。另外悄悄提一句，你原来的两个单选按钮id重复了，改成不同的id（比如第二个改成unitTrusts-pnl1）会更规范哦。

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