如何在Angular中匹配单选按钮值并设置选中状态？

核心注意点：数据类型与绑定逻辑匹配 #

单选按钮选中失败最常见的原因是绑定值的类型不匹配，或者单选组的标识不统一，以下是具体的解决步骤和示例：

1. 推荐方案：使用 [(ngModel)] 实现（最简洁可靠） #

单选按钮组必须绑定同一个 ngModel 变量，且每个单选的 value 要对应选项的唯一标识，同时确保 name 属性一致（浏览器靠这个识别同一组单选，保证互斥）。

组件类代码

// 渲染单选的选项数组
options = [
  { id: 1, label: '选项A' },
  { id: 2, label: '选项B' },
  { id: 3, label: '选项C' }
];
// 存储选中值的变量
selectedValue: number;

ngOnInit() {
  // 模拟从外部数组加载选中数据
  const loadedData = [{ targetId: 2 }]; // 假设加载的数据中选中的是id=2的选项
  this.selectedValue = loadedData[0].targetId;
}

模板代码

<div *ngFor="let option of options">
  <input 
    type="radio" 
    name="optionGroup"  <!-- 必须统一name，确保是同一组单选 -->
    [(ngModel)]="selectedValue" 
    [value]="option.id"
  >
  <label>{{ option.label }}</label>
</div>

2. 避免踩坑：不要混用 [(ngModel)] 和 [checked] #

如果手动设置 [checked]="true"，同时又用 ngModel，Angular 的双向绑定会覆盖手动设置的状态，导致冲突。如果非要用 [checked]（不推荐），需要去掉 ngModel，自己处理选中事件：

<div *ngFor="let option of options">
  <input 
    type="radio" 
    name="optionGroup"
    [value]="option.id"
    [checked]="option.id === selectedValue"
    (change)="selectedValue = option.id"
  >
  <label>{{ option.label }}</label>
</div>

3. 排查常见错误 #

• 类型匹配问题：比如选项的 value 是字符串 "2"，但你给 selectedValue 赋值数字 2，会导致匹配失败，必须保证两者类型完全一致。
• 数组加载时机：如果外部数组是异步加载的，要确保在数据加载完成后再给 selectedValue 赋值，比如放在 subscribe 回调里。
• name 属性不统一：不同的 name 会让单选按钮变成多组，无法互斥，也会导致选中状态异常。

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