如何实现mat-radio-group点击已选中项时的重置切换功能？

要实现点击已选中的单选按钮时取消选中状态，你可以通过以下步骤修改代码：

• 绑定数据模型：给mat-radio-group绑定[(ngModel)]，关联组件内的属性（比如selectedOption）。
• 添加点击事件：给每个mat-radio-button添加(click)事件，触发自定义处理函数（比如onRadioClick(option)）。
• 实现逻辑判断：在组件的处理函数中，判断当前点击的选项是否与已选中的值一致，一致则将模型值设为null（取消选中），否则设置为当前选项值。

模板代码示例 #

<mat-radio-group [(ngModel)]="selectedOption">
  <mat-radio-button value="A" (click)="onRadioClick('A')">选项A</mat-radio-button>
  <mat-radio-button value="B" (click)="onRadioClick('B')">选项B</mat-radio-button>
  <mat-radio-button value="C" (click)="onRadioClick('C')">选项C</mat-radio-button>
</mat-radio-group>

组件类代码示例 #

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  selectedOption: string | null = null;

  onRadioClick(option: string) {
    if (this.selectedOption === option) {
      this.selectedOption = null;
    } else {
      this.selectedOption = option;
    }
  }
}

关键说明 #

• 点击未选中的选项时，ngModel会自动更新为对应值，处理函数会保持选中状态。
• 点击已选中的选项时，处理函数将selectedOption设为null，从而取消整个单选组的选中状态，和你提到的按钮重置效果完全一致。

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