Angular：删除默认选项后清除单选按钮选中状态

要实现删除默认项后所有单选框都处于未选中状态，核心是在删除默认项时主动清空单选组绑定的模型值，而非依赖组件自动选中剩余项。以下是具体修改步骤：

1. 定位删除逻辑并添加清空判断 #

找到你处理条目删除的方法（比如onDelete或类似函数），在删除操作执行前后加入判断：

// 假设你的默认项ID存储在this.selectedDefaultId中
onDeleteItem(deletedItem: any) {
  // 检查被删除的是否是当前默认项
  if (deletedItem.id === this.selectedDefaultId) {
    // 清空默认项标识，让所有单选失去选中状态
    this.selectedDefaultId = null;
  }
  // 执行删除操作（比如从列表中移除条目）
  this.itemList = this.itemList.filter(item => item.id !== deletedItem.id);
}

2. 确保单选组件的模型绑定正确 #

检查你的onValueChange方法，确保它同步更新全局的默认项标识：

onValueChange(selectedId: string) {
  this.selectedDefaultId = selectedId;
  // 这里保留你原来的关联属性设置逻辑
}

3. 验证单选编辑器的配置 #

你的createRadioUniqueEditor创建的是“唯一选中”的单选组，需要确认该编辑器允许模型值为空。如果这个编辑器有强制选中某一项的逻辑（比如自动选中第一个条目），需要修改编辑器代码或配置，取消该自动行为，确保当selectedDefaultId为null时，所有单选都处于未选中状态。

4. 确认HTML单选组件的行为 #

你的<v6-radio>组件通过[model]="item.value"绑定模型，确保item.value指向的是全局的selectedDefaultId。当selectedDefaultId为null时，所有单选的value都不匹配模型值，自然会取消选中状态。

关键注意点 #

• 确保所有同组单选的[name]属性值一致（你的代码中[name]="itemName"已经满足），这样它们才会被视为同一个单选组。
• 不要通过SCSS样式修改选中状态，这只是视觉上的改变，无法解决组件逻辑层面的自动选中问题。

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