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

问题描述

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

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语句中返回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不应更改其状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！