如何让mat-slide-toggle仅在确认框点击Ok时切换状态

我来帮你一步步解决这两个问题：首先让开关只有点击确认框OK才切换状态，然后处理循环渲染时的同步问题。

一、单个开关的确认切换实现 #

你之前的问题在于，(click)事件会先触发开关的状态变化，再弹出确认框——这时候哪怕点Cancel，开关已经变了。我们需要调整逻辑，让状态变化完全由确认结果来控制。

修改后的HTML代码 #

<mat-card class="result"> 
  <mat-card-content> 
    <h2 class="example-h2">Result</h2> 
    <section class="example-section"> 
      <mat-slide-toggle 
        class="example-margin" 
        [color]="color" 
        [(ngModel)]="checked" 
        [disabled]="disabled"
        (change)="onToggleChange($event)">
        Slide me! 
      </mat-slide-toggle> 
    </section> 
  </mat-card-content> 
</mat-card>

修改后的TS代码 #

import { MatSlideToggleChange } from '@angular/material/slide-toggle';

export class SlideToggleConfigurableExample { 
  color = 'accent'; 
  checked = false; 
  disabled = false; 

  onToggleChange(event: MatSlideToggleChange) {
    // 弹出确认框，若用户取消则恢复原状态
    if (!confirm('Are you sure to change Status?')) {
      event.source.checked = !event.checked;
    }
  }
}

逻辑说明：

• 使用(change)事件：这个事件是在开关状态已经改变后触发的，我们可以在这里判断用户是否确认。
• 若用户点击Cancel，通过event.source.checked把开关状态恢复为之前的值，这样就不会保留误操作的变化。

二、循环渲染开关的独立状态实现 #

当你用循环渲染多个开关时，不能把所有开关都绑定到同一个checked变量——这就是为什么所有开关会同步变化。我们需要给每个开关绑定独立的状态属性。

假设你的数据源（TS代码） #

import { MatSlideToggleChange } from '@angular/material/slide-toggle';

export class SlideToggleConfigurableExample { 
  color = 'accent'; 
  disabled = false; 
  // 每个item包含独立的checked状态
  items = [
    { id: 1, label: 'Switch 1', checked: false },
    { id: 2, label: 'Switch 2', checked: true },
    { id: 3, label: 'Switch 3', checked: false }
  ];

  onToggleItemChange(event: MatSlideToggleChange, item: any) {
    if (!confirm('Are you sure to change Status?')) {
      // 恢复当前item的原状态
      event.source.checked = !event.checked;
      // 或者直接修改item的checked属性（双向绑定会同步更新视图）
      // item.checked = !item.checked;
    }
  }
}

循环渲染的HTML代码 #

<mat-card class="result"> 
  <mat-card-content> 
    <h2 class="example-h2">Result</h2> 
    <section class="example-section" *ngFor="let item of items"> 
      <mat-slide-toggle 
        class="example-margin" 
        [color]="color" 
        [(ngModel)]="item.checked" 
        [disabled]="disabled"
        (change)="onToggleItemChange($event, item)">
        {{ item.label }}
      </mat-slide-toggle> 
    </section> 
  </mat-card-content> 
</mat-card>

逻辑说明：

• 每个开关绑定到item.checked，每个item的状态都是独立的，不会互相影响。
• onToggleItemChange方法接收当前的item，确保恢复的是当前开关的状态，不会影响其他开关。

这样就能完美解决你遇到的两个问题：确认后才切换状态，循环渲染时每个开关独立控制。

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