Как сделать одиночный флажок выбрать из списка выбора мата. Аналогично переключателю, который принимает одно значение из группы значений.
Угловой мат-выбор-список, Как сделать одиночный флажок, похожий на переключатель?
Ответ 1
Это работает с материалом 5-8:
@ViewChild(MatSelectionList) selectionList: MatSelectionList;
ngOnInit() {
this.selectionList.selectedOptions = new SelectionModel<MatListOption>(false);
}
Ответ 2
Что вам нужно сделать, это:
- Слушайте для
selectionChange - Очистить все с помощью метода
deselectAll() - Установите его как выбранный снова
Я изменил исходный пример со страницы API, добавил ViewChild для списка выбора и подписался на событие selectionChange.
ngOnInit(){
this.shoes.selectionChange.subscribe((s: MatSelectionListChange) => {
this.shoes.deselectAll();
s.option.selected = true;
});
// WARNING: Don't attempt to do the following to select the value
// it won't trigger the value change event so it will remain unchecked
// this.shoes.selectedOptions.select(s.option);
// If interested source is here :
// https://github.com/angular/material2/blob/fa4ddd0a13461b2f846e114fd09f8f4e21b814b1/src/lib/list/selection-list.ts
}
Рабочий образец: https://stackblitz.com/edit/angular-i3pfu2-6n5cnt
Смотрите также: https://material.angular.io/components/list/api
Ответ 3
Начнем с того, что mat-selection-list не подходит для выбора с одним значением, поскольку он отклоняется от своего намерения:
Флажки в группе являются неисключительными вариантами; более одного флажка в группе можно установить в любой момент
То, что вы ищете, это сам элемент радио-кнопки, потому что семантически это означает:
Переключатель - это один из группы элементов управления, представляющих взаимоисключающие варианты.
К сожалению, Angular Material не включает в себя компонент mat-radio-list. Но вы все равно можете добиться этого, включив в свой mat-list-item mat-radio-button. Это обеспечит наилучшую практику, так как для пользователя это означает, что рассматриваемый список предназначен для взаимоисключающих выборов (в отличие от флажков, которые обозначают множественный выбор). И поскольку переключатели обновляют одну переменную, вы получаете эксклюзивность:
<mat-list role="list">
<mat-list-item role="listitem" *ngFor="let x of [0,1,2]; let i = index">
<mat-radio-button [value]="i" (change)="selection = $event.value">
Item {{x}}
</mat-radio-button>
</mat-list-item>
</mat-list>
Ответ 4
Просто установите для множественной опции MatSelectionList значение false:
ngOnInit() {
this.links.selectedOptions._multiple = false;
}
и вы сделали. Кроме того, сделав это, вы сможете отменить выбранный флажок.
Ответ 5
Чтобы сделать одиночный флажок выбрать из списка выбора мата, если вы не используете Угловой материал v6+, это обходной путь, который я использовал: пусть говорят, что у нас есть список категорий.
В вашем HTML:
<mat-selection-list>
<mat-list-option (selectionChange)="handleSelection($event, category)" *ngFor="let category of categories" [value]="category">
<span >{{category.name}}</span>
</mat-list-option>
</mat-selection-list>
В вашем.TS:
handleSelection(event, categorySelected) {
if (event.selected) {
event.source.selectionList.options.toArray().forEach(element => {
if (element.value.name!= categorySelected.name) {
element.selected = false;
}
});
}
}
Ключевым моментом здесь является использование свойства SelectionChange на MatListOption, а не MatSelectionList.
Ответ 6
Если вы используете ngFor для каждого квадратного флажка, вы можете сделать что-то похожее на следующее в шаблоне HTML:
<ng-container *ngFor="let address of person.addresses; let i = index">
<mat-checkbox [checked]="personCheckedIndex === i" (change)="customerCheckboxChange($event, i)"></mat-checkbox>
</ng-container>
и в TS:
public personCheckedIndex = -1;
// Called from template when checkbox value changes
personCheckboxChange(event: MatCheckboxChange, index: number) {
// This allows only one checkbox to be checked among each checkbox
this.personCheckedIndex = event.checked ? index : -1;
}
Ответ 7
Возможно, вам нужна <mat-radio-group> а не <mat-selection-list>, ее список параметров, но только один параметр. пример можно найти в документах с угловым материалом.
Но имейте в виду, что вместо флажка вы получите переключатель.
Ответ 8
попробуй это:
TS:
import { Component, OnInit, ViewChild} from '@angular/core';
import { MatSelectionList } from '@angular/material';
@Component({
selector : 'app-xxx',
templateUrl: './xxx.component.html'
})
export class xxxComponent implements OnInit {
public data: Object[] = [ {name : "name 1" }, {name : "name 2" }, {name : "name 3" }, {name : "name 4" } ];
@ViewChild('element_id') names_list: MatSelectionList;
ngOnInit() {
// only if the element is visible on the page, otherwise move this block and execute it until the list is displayed
setTimeout(()=>{
this.names_list.selectedOptions._multiple = false;
},0);
}
}
шаблон:
<mat-selection-list #element_id>
<mat-list-option *ngFor="let d of data">
{{ d.name }}
</mat-list-option>
</mat-selection-list>
Ответ 9
С философской точки зрения и с точки зрения UX, вам нужно использовать переключатели. Это единственный способ обеспечить удобное для пользователя "как ожидается" поведение.
Ответ 10
Вы можете использовать 'mat-checkbox' вместо 'mat-selection-list' и играть с событием click следующим образом:
HTML
<div *ngFor=" ... loop">
<mat-checkbox #checkBoxes (click)="changeCheckBox()">
</mat-checkbox>
</div>
TS
@ViewChildren('checkBoxes') checkBoxes: QueryList<MatCheckbox>;
changeCheckBox() {
this.checkBoxes.filter((checkbox: MatCheckbox) =>
checkbox.checked === true
)[0].checked = false;
}
помните, что по умолчанию все флажки сняты.
Ответ 11
Вы можете объявить [selected] атрибут mat-list-option
например:
<mat-selection-list #list>
<mat-list-option *ngFor="let item of myList"
[(mgModel)]="selectedOption"
[selected]="item.id === selectedOption.id"
[value]="item">
{{item.name}}
</mat-list-option>
</mat-selection-list>
таким образом вы получаете только один выбор без изменения какого-либо скрытого свойства MatSelectionList.
Также вы можете сделать это, заменив ngModel логикой контроллера, таким образом вы сохраните последний объект выбора в переменной класса.
<mat-list-option (selectionChange)="onChange($event)"'