Связывание списка выбора материалов Angular

Я создаю панель инструментов со списком выбора (флажки для каждого элемента списка), используя Angular Material 2. Я просто не могу понять, как установить флажки перед отображением списка, а затем получить выбранные элементы после взаимодействия с пользователем.

Я пытаюсь использовать элемент управления внутри формы, думая, что это может понадобиться для привязки к ngModel, но, похоже, это не помогает. Мой HTML до сих пор:

<form
  novalidate
  #areaSelectForm="ngForm">

<div>
    <mat-selection-list 
                        #areasList="ngModel"
                        [(ngModel)]="model"
                        id="areaListControl"
                        name="areaListControl"
                        (ngModelChange)="onAreaListControlChanged($event)">
        <mat-list-option *ngFor="let tta of taskTypeAreas" (click)="onCheckboxClick($event)" [value]="tta">
            {{tta}}
        </mat-list-option>
    </mat-selection-list>
</div>

</form>

Это, должно быть, проторенный путь, но документацию трудно интерпретировать, и я не могу найти подходящих примеров.

Любое руководство очень приветствуется, пожалуйста.

Ответы

Ответ 1

Начиная с версии 5.0.0, угловой материал теперь поддерживает ngModel для списка выбора.

Таким образом, код может быть упрощен до

<mat-selection-list #list [(ngModel)]="selectedOptions" (ngModelChange)="onNgModelChange($event)">
    <mat-list-option *ngFor="let tta of taskTypeAreas" [value]="tta.name">
        {{tta.name}}
    </mat-list-option>
</mat-selection-list>

Релиз также предоставляет событие ngModelChange для списка выбора. Вот обновленный стек блиц

(Оригинальный ответ до Angular 5.0.0)

Похоже, что mat-selection-list в настоящее время не поддерживает ngModel (https://github.com/angular/material2/pull/7456), но похоже, что он будет поддерживаться в ближайшем будущем. В то же время вы можете использовать ссылочную переменную #list чтобы получить выбранные параметры.

// component.html

<mat-selection-list #list>
    <mat-list-option *ngFor="let tta of taskTypeAreas" [selected]="tta.selected" 
        (click)="onAreaListControlChanged(list)" [value]="tta.name">
        {{tta.name}}
    </mat-list-option>
</mat-selection-list>

Затем передайте ссылочную переменную в свой onAreaListControlChanged(list) чтобы вы могли проанализировать выбранные параметры.

// component.ts

onAreaListControlChanged(list){
    this.selectedOptions = list.selectedOptions.selected.map(item => item.value);
}

Чтобы установить флажки при загрузке, вы можете использовать свойство [selected] каждого <mat-list-option>.

<mat-list-option ... [selected]="tta.selected" ...>

Для этого вам нужно добавить еще одно свойство в ваш массив.

// component.ts

taskTypeAreas: {
    name: string;
    selected: boolean;
}[] = [
    {
        name: 'Area 1',
        selected: false
    },
    {
        name: 'Area 2',
        selected: false
    },
    {
        name: 'Area 3',
        selected: true
    },
];

Это сделает Area 3 выбранной при загрузке. Вот стеблиц, демонстрирующий это.