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

Posted 2023-03-13

【中文标题】mat-slide-toggle Angular Material 以编程方式切换

【英文标题】：mat-slide-toggle Angular Material toggle programmatically

【发布时间】：2020-02-10 10:01:01

【问题描述】：

我正在尝试通过代码toggle toggle()：

模板

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

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

有什么想法吗？

--编辑--

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

【问题讨论】：

mat-slide-toggle 有一个输入属性checked，最初您将其分配给true 或false，然后在change 事件中，您可以切换它。

我很清楚，但我想在更改后以编程方式将其更改回来，我该怎么做？

【参考方案1】：

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

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

  @ViewChild("toggleElement") ref: ElementRef;

  checked: boolean;

  ngOnInit() 
    this.checked = true;
  

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

【讨论】：

这行得通。但是，我没有使用 ViewChild，而是简单地将元素传递给函数。谢谢！

我很抱歉评论了离题问题，但请你帮我解决这个问题，我三天以来一直在寻找答案：***.com/questions/63722449/…

【参考方案2】：

您只能使用模板引用变量。

模板

<mat-slide-toggle color="primary" #slide (change)="updateFunc(slide)">
</mat-slide-toggle>

ts

updateFunc(e) 
 let var=false;
 if(!var)
 
   e.checked = true; //either true or false