Angular：如何阻止复选框即时变更，仅在用户确认弹窗后修改状态

要实现点击复选框后先弹窗确认再变更状态，你需要拆分双向绑定，手动控制状态更新逻辑，避免Angular自动同步视图和模型：

修改后的HTML代码 #

<div class="mr-3 ml-3">
  <label class="switch">
    <input
      [disabled]="!isEdit"
      type="checkbox"
      [checked]="item.status"
      (click)="toggleStatus($event, item)"
    />
    <span class="slider round"></span>
  </label>
</div>

组件TS代码 #

toggleStatus(event: MouseEvent, item: any): void {
  // 阻止复选框默认的状态切换行为，避免视觉立刻变化
  event.preventDefault();

  // 弹窗确认
  if (window.confirm('确定要修改状态吗？')) {
    // 用户确认后，再更新模型值，视图会自动同步
    item.status = !item.status;
  }
}

关键逻辑说明 #

• 移除[(ngModel)]双向绑定，改用单向的[checked]="item.status"绑定视图状态，这样视图只会跟着item.status变化，不会自动反向修改模型。
• 添加(click)事件处理函数，通过event.preventDefault()阻止复选框的默认点击行为——这一步是核心，能让复选框点击后视觉状态不立刻切换。
• 在弹窗确认通过后，手动修改item.status的值，此时[checked]会同步更新复选框的视觉状态，实现“确认后才变更”的需求。

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