As of version 5.0.0, angular material now supports ngModel
for selection list.
So the code can be simplified to
<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>
The release also exposes an ngModelChange
event for selection list. Here is the updated stack blitz
(Original answer before Angular 5.0.0)
It appears mat-selection-list does not currently support ngModel (https://github.com/angular/material2/pull/7456), but it looks like it will be supported in the near future. In the meantime you can use a reference variable #list
to grab the selected options.
// 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>
Then pass in the reference variable to your onAreaListControlChanged(list)
method so you can parse out the selected options.
// component.ts
onAreaListControlChanged(list){
this.selectedOptions = list.selectedOptions.selected.map(item => item.value);
}
To select the checkboxes on load, you can use the [selected]
property of each <mat-list-option>
.
<mat-list-option ... [selected]="tta.selected" ...>
To do this you'll need to add another property to your array.
// component.ts
taskTypeAreas: {
name: string;
selected: boolean;
}[] = [
{
name: 'Area 1',
selected: false
},
{
name: 'Area 2',
selected: false
},
{
name: 'Area 3',
selected: true
},
];
This will make Area 3
be selected on load. Here is a stackblitz demoing this.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…