使用Angular 14构建的单选按钮无法选中选项，该如何解决？

首先，Angular Material的mat-radio-group组件本身就会自动管理内部单选按钮的互斥性，不需要给每个mat-radio-button单独设置name属性——手动添加反而可能干扰组件的默认行为，导致互斥失效。

按以下步骤调整：

• 移除所有mat-radio-button上的name属性，只保留mat-radio-group的name配置。
• 确保你的模块中已经正确导入MatRadioModule（这是最容易遗漏的点）。
• 如果需要绑定选中值，直接在mat-radio-group上使用双向绑定或表单控件。

修改后的代码示例：

<mat-radio-group aria-label="gender" name="gen" [(ngModel)]="selectedGender">
  <mat-radio-button value="male">Male</mat-radio-button>
  <mat-radio-button value="Female">Female</mat-radio-button>
  <mat-radio-button value="Others">Others</mat-radio-button>
</mat-radio-group>

对应的组件类代码（如果使用ngModel）：

import { Component } from '@angular/core';

@Component({
  selector: 'app-gender-radio',
  templateUrl: './gender-radio.component.html'
})
export class GenderRadioComponent {
  selectedGender: string = 'male'; // 设置默认选中值
}

额外排查点：

• 检查是否存在多个mat-radio-group嵌套的情况，确保每个单选按钮都归属正确的分组。
• 确认没有自定义样式或第三方库覆盖了单选按钮的默认行为，比如擅自修改了底层input元素的name或id属性。

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