如何通过编程方式控制radio单选按钮的选中与高亮状态

问题核心 #

你的代码存在三个导致状态不生效的问题：

1. 同时用[(ngModel)]和[(checked)]两个双向绑定控制单选状态，二者逻辑冲突
2. 你需要控制的变量iAreaOfCoverageForThresholdPasser.average-height，和当前单选框绑定的iOperationPasser.averageHeight、averageHeight完全不匹配，修改前者自然不会触发视图更新
3. 单选框的选中逻辑是ngModel绑定值与[value]值相等时自动选中，你当前[value]为数字1，和你要设置的布尔值true不匹配

修复方案 #

1. 调整HTML代码，删掉冗余的[(checked)]绑定，修改[value]和[(ngModel)]匹配你要控制的变量：

<div id="idRadioButtonForAverageHeightDivision">
  <input 
    [value]="true" 
    [(ngModel)]="iAreaOfCoverageForThresholdPasser.averageHeight" 
    name="radioGroupForOperations" 
    type="radio" 
    clrCheckbox  
    (change)="onAverageHeightOptionSelected($event)"
  />
  <label id="operation-average-height">
    {{ "SITE.AREAS_OF_COVERAGE_FOR_THRESHOLD.OPERATION_AVERAGE_HEIGHT" | translate }} 
    <button class="btn btn-sm btn-icon" (click)="showInformation('SERVICE_DIST_4_AGRI')">
       <clr-icon shape="help-info" class="is-solid"></clr-icon>
    </button>
  </label>
</div>

2. 后续直接修改对应变量即可控制单选框状态：

// 选中单选框
this.iAreaOfCoverageForThresholdPasser.averageHeight = true;
// 取消选中
this.iAreaOfCoverageForThresholdPasser.averageHeight = false;

多单选框同组场景说明 #

如果是多个单选框同组的情况，只需要给所有同组单选框设置相同的name属性，每个单选框设置不同的[value]，修改ngModel绑定变量为对应value值，就会自动选中对应的单选框。

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