单击“确认取消”按钮时，滑动切换不应更改

Question

在我的项目中，我使用滑动切换来激活或停用产品。一切正常，只有当我添加一个确认对话框时，我的幻灯片才会像 Demo.

所以当我点击取消时，滑动切换改变当我点击确定时，滑动切换改变。

我的代码html:

<mat-card class="result">
  <mat-card-content>
    <h2 class="example-h2">Result</h2>
     <section class="example-section">
      <mat-slide-toggle
          class="example-margin"
          [color]="color"
          [checked]="checked"
          [disabled]="disabled"
          (click)="myfunction()">
        Slide me!
      </mat-slide-toggle>
    </section>
  </mat-card-content>
</mat-card>

代码 ts:

export class SlideToggleConfigurableExample {
  color = 'accent';
  checked = false;
  disabled = false;
    myfunction() {
    if (confirm('Are you sure to change Status?')) {
     }
  }
}

我想说的是，点击确定时如何改变我的滑动切换，当我点击取消时，我不想改变任何东西。

谢谢。

Answer 1

试试这个：

<mat-slide-toggle
      class="example-margin"
      [color]="color"
      [checked]="checked"
      [disabled]="disabled"
      (click)="myfunction()"
      onclick="return confirm('Are you sure?')">
    Slide me!
  </mat-slide-toggle>

并从 ts

中删除 if (confirm('Are you sure to change Status?')) {}

Demo

Answer 2

.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
    background-color: #c8e38f;
}
.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
    background-color: #91c71f;
}
.mat-slide-toggle .mat-ripple-element{
    background-color: rgba(145, 199, 31, .12);
}

这是颜色垫滑动切换的所有样式

单击“确认取消”按钮时，滑动切换不应更改

slide-toggle should not change when I click the `confirm cancel` button

angular

typescript

angular5

materialize

slidetoggle