时间戳

首页 > 解决方案 > 当我在确认窗口中单击取消时，mat-slide-toggle 不应更改其状态

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

问题描述

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

这是我的 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 语句中返回 false。没用。甚至试图改变e.checked = false。它只是改变了事件对象的值，但并没有阻止切换滑动

标签： angularangular-materialangular5angular-material2

解决方案

不幸的是，您不能使用stopPropagationwith mat-slide-toggle，您需要true在 else 条件下以编程方式将选中的值设置回事件。

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

推荐阅读