如何在Angular中实现单选按钮组的(click)切换功能？

你的需求是实现单选按钮组效果：初始第一个按钮选中，点击已选中的按钮保持状态，点击未选中的按钮则切换为选中状态，原选中按钮取消选中。当前代码的问题是三个按钮状态独立控制，没有互斥逻辑，下面是优化后的实现：

组件TS代码 #

// 用单个变量记录当前选中的按钮ID，初始选中第一个
selectedButton = 'button1';

constructor() { }

ngOnInit(): void { }

// 处理按钮点击事件
selectButton(buttonId: string) {
  // 如果点击的是已选中的按钮，直接返回保持状态
  if (this.selectedButton === buttonId) {
    return;
  }
  // 否则切换选中状态
  this.selectedButton = buttonId;
}

模板HTML代码 #

<div role="button" (click)="selectButton('button1')">
    <p>button</p>
    <button *ngIf="selectedButton === 'button1'"> selected  </button>
    <button *ngIf="selectedButton !== 'button1'"> unselected      </button>
</div>

<div role="button" (click)="selectButton('button2')">
    <p>button</p>
    <button *ngIf="selectedButton === 'button2'"> selected   </button>
    <button *ngIf="selectedButton !== 'button2'"> unselected      </button>
</div>

<div role="button" (click)="selectButton('button3')">
    <p>button</p>
    <button *ngIf="selectedButton === 'button3'"> selected   </button>
    <button *ngIf="selectedButton !== 'button3'"> unselected     </button>
</div>

说明 #

• 用单个变量selectedButton代替三个独立布尔值，逻辑更简洁，天然实现单选互斥
• 点击事件处理函数selectButton会判断是否点击当前选中项，是则不做操作，否则切换选中状态
• 模板通过对比selectedButton的值来显示选中/未选中按钮，避免冗余状态变量

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