Angular项目checkbox点击弹窗确认取消时保持原有选中状态问题问询

问题根因 #

你遇到的问题本质是原生checkbox的默认点击行为会优先变更显示状态，而你的逻辑中只有确认操作才会更新绑定的row.contributor变量，点击取消时没有同步回滚该变量，导致Angular变更检测无法触发视图状态还原。

修复方案 #

首先修改HTML模板代码，把点击事件的传参改为完整事件对象，方便阻止默认行为：

<input id="contributorCheckbox"
     type="checkbox"
     [checked]="row.contributor"
     (click)="setRightContributor(row, $event)">

然后修改TS逻辑代码，阻止默认的checkbox状态切换，仅在用户确认后才更新绑定变量：

setRightContributor(user: UserAccountDto, event: MouseEvent): void {
  // 阻止浏览器默认修改checkbox状态的行为
  event.preventDefault();
  // 计算点击后期望切换到的目标状态
  const targetChecked = !user.contributor;

  this.matDialog.open(PopupConfirmationComponent, {
    data: {
      message: this.translateService.instant('GENERAL.CONFIRMATION_CONTRIBUTOR'),
    },
  }).afterClosed()
    .subscribe(confirmation => {
      if (confirmation) {
        // 用户确认后再更新绑定值，Angular会自动同步视图状态
        user.contributor = targetChecked;
        this.userAccountService.setRoleContributor(user, targetChecked).subscribe();
      }
    });
}

原理解释 #

你原来的写法中，点击checkbox时浏览器会直接修改DOM上的checked属性，此时你绑定的user.contributor还没有更新。如果用户点击取消，你没有把user.contributor手动还原为之前的值，Angular检测不到绑定变量变化，就不会触发视图更新回原来的状态。
修改后的写法直接禁用了浏览器默认的状态切换行为，完全由业务逻辑控制绑定变量user.contributor的更新时机：确认则修改变量，视图自动同步新状态；取消则不对变量做任何修改，视图自然保持原有状态，不需要刷新页面。

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