angular - 单击时取消选中事件的 Angular Material 切换按钮

Question

我需要修改标准的功能 Angular Material toggle button component ，以便单击事件按钮将组件返回到没有按钮处于事件状态的状态。这有两个步骤:

• 更新切换组的值
• 将点击按钮的“checked”参数更改为 false

我尝试了几种方法，例如

模板:

<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() 设置的组值与单击按钮的用户操作冲突。

唯一有效的方法是:

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

但是单个按钮上的两次点击事件感觉很糟糕，尤其是第二次点击中的三元组与本能应该是相反的。

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

我试过:

@ViewChildren('no_btn') no_btn: ElementRef;

然后:

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

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

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

Answer 1

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

<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 .