mat-slide-toggle Angular Material 以编程方式切换

Jon*_*han 2 typescript angular-material angular angular8

我想toggletoggle()通过代码:

模板

<mat-slide-toggle color="primary" (change)="updateFunc($event)"></mat-slide-toggle>
Run Code Online (Sandbox Code Playgroud)

ts

updateFunc(e) {
  // do some checks to see if can be activated
  // if can't be activated, don't slide to on
  e.checked = false; // <--- does not work
  e.toggle(); // <-- does not work
}
Run Code Online (Sandbox Code Playgroud)

有任何想法吗?

- 编辑 -

澄清一下,在更改事件之后,按钮切换为打开状态。我的函数运行是为了做一些测试。如果测试未通过,我想将滑块切换回关闭位置。那么,如何在我的代码中切换按钮(打开或关闭)?这只是在我的代码中使用 toggle() 方法或在我的代码中取消选中开关的问题。

Roh*_*aji 6

https://stackblitz.com/edit/angular-material-edh46h

<mat-slide-toggle #toggleElement class="example-margin" [checked]="checked" (change)="updateFunc($event)">
    Slide me!
</mat-slide-toggle>
Run Code Online (Sandbox Code Playgroud)
  @ViewChild("toggleElement") ref: ElementRef;

  checked: boolean;

  ngOnInit() {
    this.checked = true;
  }

  updateFunc(e) {
    const someCondition = true;
    if (someCondition) {
      this.ref.checked = false;
    }
  }
Run Code Online (Sandbox Code Playgroud)