Angular Material多选下拉框内嵌单选按钮点击异常求助

你遇到的核心问题有两个：

• Mat-option的点击事件会向上冒泡，触发内嵌单选按钮的选中状态切换，导致点击选项时单选自动选中
• 所有单选组共用同一个formControlName="axis"，这意味着整个表单里只有一个axis值，选择任何一个单选按钮都会覆盖之前的选择，同时联动取消对应选项的选中状态

可行实现方案 #

方案1：阻止事件冒泡 + 独立维护每个选项的单选状态

1. 给单选按钮和单选组添加(click)="$event.stopPropagation()"，避免点击单选操作触发mat-option的点击逻辑
2. 用对象存储每个property对应的axis选择，而非共用一个表单控件

组件类代码：

// 存储每个property的axis选择，key为property值，value为'Primary'/'Secondry'
propertyAxisMap: { [key: string]: string } = {};

// 单选切换时更新状态
onAxisChange(property: string, value: string) {
  this.propertyAxisMap[property] = value;
}

模板代码：

<mat-option
  *ngFor="let property of filteredProperties | async"
  [value]="property"
  matTooltipClass="tooltip"
  matTooltipShowDelay="5000"
  [matTooltip]="property"
  (click)="loadPropertiesDetails(property)">
  {{ property }}

  <mat-radio-group 
    [value]="propertyAxisMap[property]"
    (click)="$event.stopPropagation()">
    <mat-radio-button
      class="radiobtn"
      value="Primary"
      (change)="onAxisChange(property, 'Primary')"
      (click)="$event.stopPropagation()">P</mat-radio-button>
    <mat-radio-button
      class="radiobtn"
      value="Secondry"
      (change)="onAxisChange(property, 'Secondry')"
      (click)="$event.stopPropagation()">S</mat-radio-button>
  </mat-radio-group>
</mat-option>

方案2：整合到表单中（使用FormArray）

如果需要将单选状态纳入表单管理，可以用FormArray为每个property创建独立的FormControl：

组件类代码：

import { FormGroup, FormArray, FormControl } from '@angular/forms';

myForm: FormGroup;

ngOnInit() {
  // 监听属性列表加载，初始化对应表单控件
  this.filteredProperties.subscribe(properties => {
    const axisControls = properties.map(() => new FormControl('Primary')); // 默认选中Primary
    this.myForm.addControl('axisArray', new FormArray(axisControls));
  });
}

// 获取对应索引的FormControl
getAxisControl(index: number): FormControl {
  return (this.myForm.get('axisArray') as FormArray).at(index) as FormControl;
}

模板代码：

<mat-option
  *ngFor="let property of filteredProperties | async; let i = index"
  [value]="property"
  matTooltipClass="tooltip"
  matTooltipShowDelay="5000"
  [matTooltip]="property"
  (click)="loadPropertiesDetails(property)">
  {{ property }}

  <mat-radio-group 
    [formControl]="getAxisControl(i)"
    (click)="$event.stopPropagation()">
    <mat-radio-button
      class="radiobtn"
      value="Primary"
      (click)="$event.stopPropagation()">P</mat-radio-button>
    <mat-radio-button
      class="radiobtn"
      value="Secondry"
      (click)="$event.stopPropagation()">S</mat-radio-button>
  </mat-radio-group>
</mat-option>

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