Угловой мат-выбор-список, Как сделать одиночный флажок, похожий на переключатель?

Ответ 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>

Проверьте Stackblitz

Ответ 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)"'

см. также Привязка списка выбора угловых материалов