当我在确认窗口中单击取消时，mat-slide-toggle 不应更改其状态答案

【问题标题】：mat-slide-toggle shouldn't change it's state when I click cancel in confirmation window当我在确认窗口中单击取消时，mat-slide-toggle 不应更改其状态
【发布时间】：2021-01-15 20:42:11
【问题描述】：

当我检查滑动切换时，它应该可以按预期工作。但是当我尝试取消选中它时，会出现一个确认窗口，询问您是否确定。当我在该确认窗口中单击取消时，切换仍会更改为未选中，这不应该发生。它应该保持相同的状态。

这是我的 Html 和 TS 代码

// html
<mat-slide-toggle 
   (change)="change($event)" [checked]="isChecked()" >
     To-pay
   </mat-slide-toggle>

TS 代码：

// ts
    change(e) {
       if(this.checked) {
           if(confirm("Are you sure")) {
              console.log("toggle")
           }
           else {
              e.stopPropagation();
                console.log("toggle should not change if I click the cancel button")
           }
        }
    }

当尝试取消选中切换按钮时出现确认窗口并单击那里的取消选项时，切换不会发生任何事情。 stopPropagation() 也不起作用。

Edit1 ：我尝试在 else 语句中执行 return false。没用。甚至试图改变e.checked = false。它只是改变了事件对象的值，但并没有阻止切换滑动

【问题讨论】：

用“return false”代替 stopPropagation 怎么样？
我试过了。没用
当您在 uncheck 处传入此方法时，“this.checked”是否为真？也许问题是你必须在第一个 if 而不是第二个上“else”......
当我尝试取消选中时，this.checked 是真的。如果 this.checked 为 false ，则不应输入显示确认窗口的代码
你使用什么版本的 Angular ？

标签： angular angular-material angular5 angular-material2

【解决方案1】：

很遗憾，您不能将 stopPropagation 与 mat-slide-toggle 一起使用，您需要在 else 条件下的事件中以编程方式将选中的值设置回 true。

else {
    e.source.checked = true;
    console.log("toggle should not change if I click the cancel button")
}

堆栈闪电战

https://stackblitz.com/edit/angular-79yf7m?embed=1&file=app/slide-toggle-overview-example.ts

【讨论】：

它成功了。谢谢。 “来源”是我的试验中缺少的东西。
有时我不明白他们为什么要隐藏这些东西，因为很明显我们应该使用这种行为......

【解决方案2】：

我使用MatDialog 作为确认窗口，我注意到以下行为：当MatDialog 打开时，mat-slide-toggle 显示为false / unchecked 值，即使用户尚未做出决定：

演示： https://stackblitz.com/edit/angular-79yf7m-4gdxbu?file=app/slide-toggle-overview-example.ts

这是因为change 事件在mat-slide-toggle 值更改之后触发。

为了解决这个问题，我们必须在change事件触发后立即将值重置为之前的（true），然后让用户决定，如果它确认操作，我们将更新相应的值。

代码是：

change(e) {
  if (this.checked) {
    // at first, reset to the previous value
    // so that the user could not see that the mat-slide-toggle has really changed
    e.source.checked = true;

    const dialogRef = this.dialog.open(ConfirmDialogComponent);
    dialogRef.afterClosed().subscribe(response => {
      if (response) {
       this.checked = !this.checked;
      }
    })
  } else {
    this.checked = !this.checked;
  }
}

演示：https://stackblitz.com/edit/angular-79yf7m-yzwwc7?file=app%2Fslide-toggle-overview-example.ts

【讨论】：

【解决方案3】：

您可以通过监听 click 事件然后 event.preventDefault() / event.stopImmediatePropagation() 来阻止切换机制。然后打开您的对话框并根据用户选择自行切换切换：toggleReference.toggle()。

无需将其设置回 true。

【讨论】：

只听click 事件是不够的，因为mat-slide-toggle 也可以通过拖动手势来切换。
不要忘记键盘事件——tab切换到滑动切换并按空格或回车，它会在不触发click的情况下改变。

【解决方案4】：

我认为问题是 (change)="eventHandler()" 将在值更改后触发，而 (ngModelChange)="eventHandler()" 将在值更改之前触发

【讨论】：