Angular技术问题：如何让Mat-Slide-Toggle实现单选按钮功能？

这个需求核心是让多个开关之间互斥——只要有一个被打开，其余自动关闭。我来帮你搞定这个逻辑：

1. 组件中添加状态监听逻辑 #

在你的组件类里，通过监听每个answer控件的状态变化，来同步更新其他开关的状态：

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

@Component({
  // 保留你原有的组件元数据
})
export class YourComponent implements OnInit {
  updateQuestionForm!: FormGroup;

  ngOnInit() {
    // 初始化表单，这里默认生成4个选项
    this.updateQuestionForm = new FormGroup({
      options: new FormArray([
        this.createOptionGroup(),
        this.createOptionGroup(),
        this.createOptionGroup(),
        this.createOptionGroup()
      ])
    });
    // 给所有初始选项的开关绑定监听
    this.setupAnswerToggleListeners();
  }

  // 创建单个选项的FormGroup结构
  private createOptionGroup(): FormGroup {
    return new FormGroup({
      optionText: new FormControl(''),
      answer: new FormControl(false)
    });
  }

  // 批量给所有选项的开关添加监听
  private setupAnswerToggleListeners(): void {
    const optionsArray = this.updateQuestionForm.get('options') as FormArray;
    optionsArray.controls.forEach((control: FormGroup, index: number) => {
      this.setupSingleToggleListener(control, index);
    });
  }

  // 单个开关的监听逻辑
  private setupSingleToggleListener(control: FormGroup, currentIndex: number): void {
    const answerControl = control.get('answer');
    answerControl?.valueChanges.subscribe(isChecked => {
      // 只有当当前开关被打开时，才处理其他开关
      if (isChecked) {
        const optionsArray = this.updateQuestionForm.get('options') as FormArray;
        optionsArray.controls.forEach((otherControl: FormGroup, otherIndex: number) => {
          // 跳过当前开关，把其余的设为关闭状态
          if (otherIndex !== currentIndex) {
            // 使用emitEvent: false避免触发其他开关的valueChanges，防止循环执行
            otherControl.get('answer')?.setValue(false, { emitEvent: false });
          }
        });
      }
    });
  }

  // 如果有动态添加选项的需求，用这个方法
  addOption(): void {
    const optionsArray = this.updateQuestionForm.get('options') as FormArray;
    const newOption = this.createOptionGroup();
    optionsArray.push(newOption);
    // 给新选项的开关绑定监听
    this.setupSingleToggleListener(newOption, optionsArray.length - 1);
  }
}

2. 原有HTML代码无需修改 #

你的HTML已经正确完成了表单绑定，保持原样即可：

<h3>Options & Answers</h3>
<div formArrayName="options">
  <ul *ngFor="let o of updateQuestionForm.get('options')['controls']; let i = index;" [formGroupName]="i" style="list-style: none;">
    <li style="display: inline-block; margin-right: 10px;">
      <mat-form-field>
        <mat-label>Option</mat-label>
        <input matInput formControlName="optionText">
      </mat-form-field>
    </li>
    <li style="display: inline-block;">
      <mat-label>Answer</mat-label><br>
      <mat-slide-toggle color="primary" formControlName="answer"></mat-slide-toggle>
    </li>
  </ul>
</div>

关键逻辑说明 #

• 状态监听：每个开关的answer控件状态变化时，触发后续互斥处理逻辑；
• 互斥控制：只有当当前开关被打开（isChecked为true）时，才遍历所有选项，将其他开关设为关闭；
• 避免循环触发：设置{ emitEvent: false }可以防止修改其他开关状态时，再次触发它们的valueChanges订阅，避免不必要的循环执行。

这样不管是初始的4个选项还是动态新增的选项，只要有一个开关被打开，其余都会自动关闭，完全满足你的需求。

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