mat-slide-toggle 不应更改其状态

Question

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

这是我的 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。它只是更改了事件对象值，但并没有阻止切换滑动

Answer 1

不幸的是，您不能将

stopPropagation

与

mat-slide-toggle

一起使用，您需要在其他条件下的事件上以编程方式将选中的值设置回

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

Answer 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 值更改后

触发。

为了解决这个问题，我们必须在

true

 事件触发后立即将值重置为之前的 (

change

)，然后让用户决定，如果确认操作，我们将更新该值相应地。

代码为：

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

Answer 3

您可以通过监听点击事件然后

event.preventDefault()

/

event.stopImmediatePropagation()

来阻止切换机制。然后打开对话框，根据用户的选择，您可以自行切换开关：

toggleReference.toggle()

。

无需将其设置回true。

Answer 4

我认为问题是

(change)="eventHandler()"

 将在值更改后触发，而 

(ngModelChange)="eventHandler()"

 将在值更改之前触发