当我在确认窗口中单击取消时，mat-slide-toggle 不应更改其状态 [英] mat-slide-toggle shouldn't change it's state when I click cancel in confirmation window

问题描述

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

When I checked the slide toggle it should work as expected. But when I try to uncheck it there is a confirmation window asking if you are sure. When I click cancel in that confirmation window, still the toggle changes to unchecked, which shouldn't happen. It should stay in the same state.

这是我的 Html 和 TS 代码

Here is my Html and TS Code

// 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() 也不起作用.

when the confirmation window comes while trying to uncheck the toggle button and I click the cancel option there, nothing should happen to the toggle. stopPropagation() is also not working.

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

Edit1 :I tried doing return false in else statement. didn't worked. Even tried to change the e.checked = false. It just changed the event object value but didn't prevent the toggle from slidding

推荐答案

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

Unfortunately you cannot use stopPropagation with mat-slide-toggle, you will need to programmatically set the checked value back to true on the event in your else condition.

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

Stackblitz

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

这篇关于当我在确认窗口中单击取消时，mat-slide-toggle 不应更改其状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！