根据用户对 javascript 'confirm' 的响应更改 Material 滑动切换的值

Question

我正在实施 Angular Material 滑动切换。如果用户将切换开关从 true 切换为 false，我想显示确认以确保他们想要这样做。如果他们说取消，我想将滑动开关设置为 true。我做错了什么？

这是组件的 html：

<md-slide-toggle checked="checked" (change)="changeEvent($event)">Slide Toggle</md-slide-toggle>

以及组件的打字稿：

changeEvent(ev) {
    if (ev.checked === false) {
      var x = confirm("Are you sure?")
      if (!x) {
        return ev.checked === false; 
      }
    }
  }

这里有一个 plunker 展示了我目前所拥有的...http://plnkr.co/edit/WP55vlFQBljgKM0jkf2R?p=preview

我怎样才能做到这一点？

Answer 1

首先，为滑块设置一个模型并更改名称（'checked' 似乎有问题）。还可以将 [] 用于 checked 属性。然后在对话框中取消或确认时将该值设置为true或false。否则 ev.checked 值变为 'lost'，它什么都不做：

HTML:

<md-slide-toggle [checked]="myValue" (change)="changeEvent($event)">Slide Toggle</md-slide-toggle>

打字稿：

... 
if (ev.checked === false) {
      var x = confirm("Are you sure?")
      if (!x) {
        this.myValue = true; 
      }
}

Plunker

根据用户对 javascript 'confirm' 的响应更改 Material 滑动切换的值

Alter Value of Material Slide Toggle based on user response to javascript 'confirm'

html

javascript

slidetoggle

angular-material

angular