Очистка МД-радио-кнопка выбора в угловых Приложение 2

В моем приложении 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?

2 2
javascript typescript radio-button angular-material2

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

Рабочий плунжер здесь

3

Мне кажется, что вы хотели бы добавить NgModel к вашему входному значению. Что-то вроде этого: [(ngModel)]="обратный алфавит". Кроме того, вы можете изменить функцию OnClick, чтобы изменить значение "обратный алфавитный" на false.

0