单击时取消选中活动的 Angular Material 切换按钮 [英] Uncheck active Angular Material toggle buttons on click

问题描述

我需要修改标准Angular Material切换按钮组件的功能，以便单击活动按钮将组件返回到没有按钮处于活动状态的状态.这有两个步骤:

I need to modify the functionality of the standard Angular Material toggle button component, so that clicking an active button returns the component to a state where no buttons are active. This has two steps:

• 更新切换组的值
• 将单击按钮的已检查"参数更改为 false

我尝试了几种方法，例如

I've tried several approaches, e.g.

模板:

<mat-button-toggle-group #group="matButtonToggleGroup">
    <mat-button-toggle #no_btn value="no" (click)="update_toggle(group,no_btn)">No</mat-button-toggle>
    <mat-button-toggle #yes_btn value="yes" (click)="update_toggle(group,yes_btn)">Yes</mat-button-toggle>
</mat-button-toggle-group>

JS:

update_toggle(group,button){
    if(group.value==""){
        group.value = button.value;
    }
    else
    {
        group.value = "";
    }
button.checked=!button.checked;
}

但这并没有更新按钮的已检查"值，我猜是因为 update_toggle() 设置的组值与单击按钮的用户操作冲突.

But this doesn't update the 'checked' value of the buttons, I guess because the group value set by update_toggle() is in conflict with the user action of clicking the button.

唯一有效的方法是:

<mat-button-toggle-group #group="matButtonToggleGroup">
    <mat-button-toggle #no_btn value="no" (click)="update_toggle(group,no_btn)" (click)="group.value=='no' ? checked=false : checked=false">No</mat-button-toggle>
    <mat-button-toggle #yes_btn value="yes" (click)="update_toggle(group,yes_btn)" (click)="group.value=='yes' ? checked=false : checked=false">Yes</mat-button-toggle>
</mat-button-toggle-group>

但是单个按钮上的两次点击事件感觉非常糟糕，特别是因为第二次点击中的三元与本能应该是相反的.

But two click events on a single button feels very hacky, especially as the ternary in the second click is opposite to what it instinctively should be.

对更好的方法有什么建议吗?

Any suggestions for a better approach?

我试过了:

@ViewChildren('no_btn') no_btn: ElementRef;

然后:

this.no_btn['_results'][k]['_inputElement']['nativeElement']['checked']=false;

但结果似乎和函数中传递按钮引用没有什么不同；再次单击该按钮不会取消选中它.禁用确实有效，所以我认为我的代码是正确的:

But the result doesn't seem to be any different from passing the button reference in the function; clicking the button a second time doesn't uncheck it. Disabling does work, so I think my code is correct:

this.no_btn['_results'][k]['_inputElement']['nativeElement']['disabled']=true;

推荐答案

一个简单的通用解决方案，根本不需要诉诸每个按钮上的事件或单击事件，也不需要 ViewChildren 或硬编码值检查, 是在多种模式下使用按钮切换并通过组更改事件管理选择.change 事件为您提供了所需的一切，因此无需直接访问子组件:

A simple generic solution that doesn't require resorting to events on each button or click events at all, and doesn't require ViewChildren or hard-coding value checks, is to use the button toggle in multiple mode and manage selections through the group change event. The change event gives you all you need so there is no need to access child components directly:

<mat-button-toggle-group multiple (change)="toggleChange($event)">
    <mat-button-toggle value="no">No</mat-button-toggle>
    <mat-button-toggle value="yes">Yes</mat-button-toggle>
</mat-button-toggle-group>

toggleChange(event) {
    let toggle = event.source;
    if (toggle) {
        let group = toggle.buttonToggleGroup;
        if (event.value.some(item => item == toggle.value)) {
            group.value = [toggle.value];
        }
    }
}

这里是 Stackblitz.

这篇关于单击时取消选中活动的 Angular Material 切换按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！