[英]mat-slide-toggle Angular Material toggle programmatically
I am trying to toggle
the toggle()
via code:我正在尝试通过代码
toggle
toggle()
:
template模板
<mat-slide-toggle color="primary" (change)="updateFunc($event)"></mat-slide-toggle>
ts 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
}
Any ideas?有任何想法吗?
--EDIT-- - 编辑 -
To clarify, after the change event, the button is toggled to on.为了澄清,在更改事件之后,该按钮被切换到打开。 My function is run to do some tests.
我的 function 正在运行以进行一些测试。 If the tests do not pass, I want to toggle the slider back to the off position.
如果测试未通过,我想将 slider 切换回关闭的 position。 So, how do I toggle the button (on or off) in my code?
那么,如何在我的代码中切换按钮(打开或关闭)? This is simply a question of using the toggle() method in my code, or unchecking the switch in my code.
这只是在我的代码中使用 toggle() 方法或取消选中我的代码中的开关的问题。
https://stackblitz.com/edit/angular-material-edh46h 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;
}
}
You can make use of template reference variable only.您只能使用模板引用变量。
template模板
<mat-slide-toggle color="primary" #slide (change)="updateFunc(slide)">
</mat-slide-toggle>
ts ts
updateFunc(e) {
let var=false;
if(!var)
{
e.checked = true; //either true or false
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.