清除 Angular 2 App 中的 md 单选按钮选择答案

【问题标题】：Clearing md-radio-button selections in Angular 2 App清除 Angular 2 App 中的 md 单选按钮选择
【发布时间】：2018-01-23 15:27:25
【问题描述】：

我在我的 Angular 应用程序上设置了一个排序过滤器，它通过 md-radio-group 使用单选按钮，以便用户可以在数据的表格显示上选择首选的排序方法。单选按钮按预期工作。但是，我还有一个“恢复默认值”按钮，我想用它来清除所有单选按钮选择并返回默认排序。到目前为止，我很难清除单选按钮。

这是我的视图代码的样子：

    <filter-option name="Sort"
            placeholder="Select Sorting Option"
            [usePlaceholder]="!value"
            [visible]="sortFilters.enabled">
        <filter-label>{{value | capitalize}}</filter-label>
        <filter-menu>
            <md-radio-group class="mat-radio-label-content">
                <md-radio-button value="alphabetical" class="vert-radiobox-list" (click)="onSortClicked(value = 'alphabetical')">
                    Alphabetical
                </md-radio-button>
                <md-radio-button value="reverse alphabetical" class="vert-radiobox-list" (click)="onSortClicked(value = 'reverse alphabetical')">
                    Reverse Alphabetical
                </md-radio-button>
                <md-radio-button value="numeric ID" class="vert-radiobox-list" (click)="onSortClicked(value = 'numeric ID')">
                    Numeric ID
                </md-radio-button>
            </md-radio-group>
            <button md-button class="restore-button" (click)="clearSortingFilters()">Restore Defaults</button>
        </filter-menu>
    </filter-option>

在我的组件中，我有这个初始化过滤器：

sortFilters =
{
    enabled: true,
    value: false
};

这是按钮附带的清除排序过滤器的功能：

clearSortingFilters()
{
    this.sendSort.emit(this.value = '');
}

现在，在上述函数中，this.sendSort.emit(this.value = '') 完成了清除过滤标签区域中显示的选择。但是如何清除 md-radio-group 单选按钮选择呢？

【问题讨论】：

标签： javascript angular typescript radio-button angular-material2

【解决方案1】：

在我看来，您希望将 NgModel 添加到您的输入值中。像这样的东西：[（ngModel）] =“反向字母”。此外，您可能希望更改 OnClick 函数以将“reverse alphabetical”的值更改为 false。

【讨论】：

【解决方案2】：

这是你应该如何修改你的代码才能工作：

html

<md-radio-group class="mat-radio-label-content" [(ngModel)]="selectedValue">
     <md-radio-button value="alphabetical" class="vert-radiobox-list" (click)="onSortClicked(value = 'alphabetical')">
           Alphabetical
     </md-radio-button>
     <md-radio-button value="reverse alphabetical" class="vert-radiobox-list" (click)="onSortClicked(value = 'reverse alphabetical')">
           Reverse Alphabetical
     </md-radio-button>
     <md-radio-button value="numeric ID" class="vert-radiobox-list" (click)="onSortClicked(value = 'numeric ID')">
           Numeric ID
     </md-radio-button>
</md-radio-group>    
<button md-button class="restore-button" (click)="clearSortingFilters()">Restore Defaults</button>

ts

selectedValue: string;

clearSortingFilters(){
    this.selectedValue = null; // or false or ''
  }

工作小伙伴here

【讨论】：

完美。谢谢@BogdanC！