Angular 2取消选择md-button-toggle-group的md-button-toggle

Question

所以,这是我的问题.我需要以编程方式取消选择md-button-toggle我内部的任何选定内容md-button-toggle-group.目标是,当md-button-toggle-group隐藏然后重新显示时,它不应该再有任何选择md-button-toggle; 目前,它正在跟踪隐藏之前所选择的内容.不幸的是,我的尝试都没有给出积极的结果.

我特别需要使用这些图形组件,而我无法修改预期的行为.

我尝试了什么:

•将checked属性绑定md-button-toggle到布尔值,并在需要选择/取消选择时将其以编程方式设置为false/true.不行.

•清空md-button-toggle-group selected属性:我通过使用它来访问ViewChild()它,然后设置myViewChild.selected为null.不行.

•直接设置checked按钮的属性,true / false通过ViewChild访问它.也不起作用.

•将ViewChild属性设置value为null.不行.

•与之前相同,但随后致电_updateSelectedButtonToggleFromValue().看起来它会很好,但这是一个私有方法,所以我无法访问它.

这是我的HTML

<md-button-toggle-group #toggleGroup="mdButtonToggleGroup">
    <md-button-toggle value="btnBorderColor">
        <md-icon [style.color]=toolbarBorderColor.selectedOption.value>border_color</md-icon>
    </md-button-toggle>
    <md-button-toggle value="btnDelete"  [(checked)]="delChecked" (click)="doAction(actionsList.Delete)" #deleteBtn>
        <md-icon>delete</md-icon>
    </md-button-toggle>
</md-button-toggle-group>

而我的TS

@ViewChild('toggleGroup')
public toggleGroup: MdButtonToggleGroup;

@ViewChild('deleteBtn')
public toggleDelete: MdButtonToggle;

[...]

public doAction(action: ActionsEnum): void {
    if (action === ActionsEnum.Delete) {
        this.delChecked = false; // doesn't work
        this.toggleGroup.value = null;
        this.toggleGroup.selected = null;
     // this.toggleGroup._updateSelectedButtonToggleFromValue();
        this.toggleDelete.checked = false;
    }
    this.onActionClick.emit(action);
}

我有点卡住,任何帮助都会非常感激.

Answer 1

我使用Angular ^ 4.0.0遇到了同样的问题.

我无法使用以下方式访问切换组:

@ViewChild('toggleGroup')
public toggleGroup: MdButtonToggleGroup;

为了让组件中的切换组可用,我必须使用:

@ViewChild(MdButtonToggleGroup)
public toggleGroup: MdButtonToggleGroup;

一旦这个在我的组件中可用,接下来的事情就会出现.由于某些未知原因,如果"selected"项目应用了某些自定义css,则重置不起作用.(<md-button-toggle).我必须做的就是让它工作,就是设置this.mdToggleButtonGroup.selected = null; 这样做,它将删除所选的状态.

检查这个plunker示例:https://plnkr.co/edit/TGsonTD4x2yCtvHCVx9E ？ p = preview