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

Question

所以，这是我的问题。我需要以编程方式 能够取消select 我md-button-toggle-group 中的任何selected md-button-toggle。目标是，当 md-button-toggle-group 被隐藏然后重新显示时，它不应该再有任何 selected md-button-toggle ；目前，它正在跟踪隐藏之前 select 编辑的内容。不幸的是，我的 none 次尝试给出了肯定的结果。

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

我尝试了什么：

• 将 md-button-toggle 的 checked 属性绑定到布尔值，并在需要时以编程方式将其设置为 false / true select / unselect 它。没用。

• 清空 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

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

Angular 2 unselect md-button-toggle of md-button-toggle-group

angular

angular-material2