Question

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

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

我尝试了什么：

•将checked的{{1}}属性绑定到布尔值，并在需要选择/取消选择时以编程方式将其设置为false / true。不起作用。

•清空md-button-toggle md-button-toggle-group属性：我使用selected对其进行访问，然后将ViewChild()设置为myViewChild.selected。不起作用。

•将按钮的null属性直接设置为checked，由ViewChild访问它。也不起作用。

•将ViewChild属性true / false设置为value。不起作用。

•与之前相同，但随后致电null。看起来它会很好，但这是一种私有方法，所以我无法访问它。

这是我的 html

_updateSelectedButtonToggleFromValue()

我的 ts

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

我有点被困，任何帮助都会非常感激。

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示例：ambiguous and not standard

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

1 个答案: