Angular btn-group：字符串存在于数组时为按钮切换active类

你现在的思路方向是对的，但有两个核心问题需要调整：一是点击后的状态切换逻辑写反了，二是不需要手动操作DOM增删类，用框架本身的类绑定能力实现更稳定。 #

修正状态切换逻辑 #

你当前的判断逻辑倒置了：点击按钮时，如果值已经在selected数组中，代表当前是已选中状态，点击后要取消选中，把值从数组移除；如果值不在数组中，才是要选中，把值加入数组。
修改组件里的点击方法：

checkIfInArr(name: string) {
  const targetIndex = this.selected.indexOf(name);
  if (targetIndex > -1) {
    // 已选中，执行取消：从选中数组移除
    this.selected.splice(targetIndex, 1);
  } else {
    // 未选中，执行选中：加入选中数组
    this.selected.push(name);
  }
}

你初始设置的this.selected = ['one', 'two', 'three']会让三个按钮默认都是选中状态，如果要默认全不选，把初始值改成空数组[]即可。 #

模板中动态绑定active类 #

不要在方法里手动查找DOM元素修改class，Angular提供了原生的类绑定语法，会自动根据数据状态更新DOM上的类，直接修改按钮模板即可：

<div class="btn-group">
    <button 
      (click)="checkIfInArr('one')"
      [class.active]="selected.includes('one')"
    >One</button>
    <button 
      (click)="checkIfInArr('two')"
      [class.active]="selected.includes('two')"
    >Two</button>
    <button 
      (click)="checkIfInArr('three')"
      [class.active]="selected.includes('three')"
    >Three</button>
</div>

只要提前在样式文件里写好.active类的配色规则，比如：

.btn-group button {
  /* 按钮默认样式 */
  padding: 6px 12px;
  border: 1px solid #d9d9d9;
  background: #fff;
  cursor: pointer;
}
.btn-group button.active {
  /* 选中态样式 */
  background: #1677ff;
  border-color: #1677ff;
  color: #fff;
}

点击按钮时就会自动切换选中颜色，完全不需要手动操作DOM，也不会出现数据和视图不同步的问题。 #

可选优化：动态按钮场景写法 #

如果后续按钮选项可能增减，不要硬写重复的按钮标签，可以把选项抽成配置数组，用循环渲染减少冗余代码：
首先在组件中定义选项配置：

// 按钮配置项，后续增删改只需要改这个数组
btnOptions = [
  { value: 'one', label: 'One' },
  { value: 'two', label: 'Two' },
  { value: 'three', label: 'Three' }
]

模板直接循环渲染：

<div class="btn-group">
  <button 
    *ngFor="let item of btnOptions"
    (click)="checkIfInArr(item.value)"
    [class.active]="selected.includes(item.value)"
  >{{ item.label }}</button>
</div>

如果要实现单选互斥的效果（同一时间只有一个按钮选中），逻辑更简单：不需要数组存选中值，直接用单个变量存储当前选中值即可，点击时直接覆盖赋值，类绑定判断相等就可以。 #

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