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

问题描述

我需要修改标准角度材料切换按钮组件的功能 ，因此单击活动按钮将使组件返回到没有按钮处于活动状态的状态.这有两个步骤:

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:

• 更新切换组的值
• 将"clicked"按钮的"checked"参数更改为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;
}

但是，这不会更新按钮的"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.

有什么更好的建议吗?

我尝试过:

@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或对值进行硬编码，是在多个模式下使用按钮切换按钮，并通过组更改事件管理选择.更改事件为您提供了所需的一切，因此无需直接访问子组件:

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屋！