关于typescript:mat-slide-toggle Angular Material以编程方式进行切换

mat-slide-toggle Angular Material toggle programmatically

我正在尝试通过代码 toggle

模板

1
<mat-slide-toggle color="primary" (change)="updateFunc($event)"></mat-slide-toggle>

ts

1
2
3
4
5
6
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
}

有什么想法吗?

-编辑-

为明确起见,在更改事件之后,按钮被切换为on。我的功能正在运行以进行一些测试。如果测试没有通过,我想将滑块切换回关闭位置。那么,如何在代码中切换按钮(打开或关闭)?这只是在我的代码中使用toggle()方法或在我的代码中取消选中该开关的问题。


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

1
2
3
<mat-slide-toggle #toggleElement class="example-margin" [checked]="checked" (change)="updateFunc($event)">
    Slide me!
</mat-slide-toggle>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  @ViewChild("toggleElement") ref: ElementRef;

  checked: boolean;

  ngOnInit() {
    this.checked = true;
  }

  updateFunc(e) {
    const someCondition = true;
    if (someCondition) {
      this.ref.checked = false;
    }
  }