Angular 角度：如何使垫滑动切换作为单选按钮工作？

我有一个动态表单，有1个输入字段和1个

mat滑动开关

。我想要的是，假设表单获取4个滑动切换，然后如果我设置任何一个切换

true

，那么其他切换将自动为

false

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>

选项与答案


选项


回答

当前情景：

但是我想如果我单击第二个选项，那么第三个选项将自动获得

false

这是我在Stackblitz中的观点

---

请帮帮我。

使用

[checked]

属性设置第三张幻灯片的FALSE取决于第二张幻灯片的检查

比如说

  <mat-slide-toggle
      class="example-margin"
      [color]="color"
      [checked]="checked">
    Slide me!
  </mat-slide-toggle>

滑到我身上！

第二张幻灯片检查时，选中的值设置为false。

您可以使用由提供的

change（）

事件回调，回调方法确保只有一个滑块设置为true（查看）-

// 以这种方式为例,


捕获事件
change（）
并传递索引
i
将所有答案设置为false
将单击的答案设置为true。
这种方法将确保如果选择了一个答案，那么它将保持选中状态，除非选择了另一个答案，就像单选按钮一样




选项


回答




updateAnswer（一）{
const controls=this.updateQuestionForm.get（“选项”）[“控件”]；
controls.forEach（control=>{
control.get（“answer”）.setValue（false）；
});
控件[i].get（“answer”）.setValue（true）；
}

但是，正如我在问题中所述，控件是通过迭代循环来实现的，还有一件事，如果我应用check，那么所有幻灯片也可以切换，您可以将事件绑定到一个获取索引的函数，然后使用indexcan从函数的formArray中检索控件。请提供一个示例，好吗看看这个
<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;">
            <input formControlName="option_text" placeholder="Text">
        </li>
        <li style="display: inline-block;">
            <mat-slide-toggle color="primary" formControlName="answer" (change)="toggle(o, i)"> //<--- this event handler
            </mat-slide-toggle>
        </li>
    </ul>
</div>

toggle(event, i) {
    const formArray = <FormArray>this.updateQuestionForm.controls["options"];
    const len = formArray.length;
    for (let j = 0; j < len; j++) {
      if (event.value && i !== j) {
        formArray.at(j)["controls"]["answer"].setValue(false);
      }
    }
  }