绑定 Angular material Select 列表

从版本5.0.0开始，Angular material 现在支持ngModel作为 Select 列表.

所以代码可以简化为

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

该版本还为 Select 列表公开了ngModelChange事件.这是更新后的stack blitz条

(Original answer before Angular 5.0.0)

mat-select-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);
}

要 Select 加载时的复选框，可以使用每个<mat-list-option>的[selected]属性.

<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在加载时被选中.这是一台stackblitz的样机.