如何使用TypeScript以编程方式取消单选按钮的选中状态

你之前操作不生效的核心原因是单选按钮同时绑定了[(ngModel)]和[(checked)]两个双向状态属性，二者逻辑冲突，且你修改的averageHeight变量不是ngModel绑定的iOperationPasser.averageHeight，状态优先级更高的ngModel值没有变化，所以选中状态不会更新。

单选按钮的选中状态不需要同时绑定两个属性，任选以下一种方案修改即可：

方案1：保留ngModel绑定（推荐，适配单选组逻辑） #

Angular中单选组的选中状态由同name属性下，ngModel绑定的值是否匹配当前input的[value]决定，不需要额外绑定checked属性。

• 第一步：删除input标签上的[(checked)]="averageHeight"属性
• 第二步：需要取消选中时，将iOperationPasser.averageHeight设为不等于当前input的value（即不等于0）的值即可，示例代码如下：

修改后的HTML代码：

<div id="idRadioButtonForAverageHeightDivision">
  <input 
    [value]="0" 
    [(ngModel)]="iOperationPasser.averageHeight" 
    name="radioGroupForOperations" 
    type="radio" 
    clrCheckbox  
    (change)="toggleShowAverageHeight()"
  />
  <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>

TS代码：

// 取消当前单选按钮选中的方法
uncheckAverageHeightRadio() {
  // 赋值为null、undefined或其他不等于0的值都会触发取消选中
  this.iOperationPasser.averageHeight = null;
}

方案2：使用checked属性单独控制 #

如果你的业务场景只需要单独控制这一个单选按钮的选中状态，可以移除ngModel绑定，仅通过checked属性控制：

• 第一步：删除input标签上的[(ngModel)]绑定
• 第二步：需要取消选中时直接给averageHeight赋值为false即可

修改后的HTML代码：

<div id="idRadioButtonForAverageHeightDivision">
  <input 
    [value]="0" 
    name="radioGroupForOperations" 
    type="radio" 
    clrCheckbox  
    (change)="toggleShowAverageHeight()"
    [(checked)]="averageHeight"
  />
  <!-- label部分和原有逻辑保持不变 -->
</div>

TS代码：

uncheckAverageHeightRadio() {
  this.averageHeight = false;
}

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