Question

我正在使用Angular Material 2创建一个带有选择列表（每个列表项的复选框）的工具栏。我无法弄清楚如何在列表显示之前设置复选框，然后在用户交互后获取所选项目。 / p>

我在一个Form中尝试控制，认为我可能需要这个绑定到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>

这必须是一条很好的路径，但文档难以解释，我似乎无法找到任何合适的例子。

非常欢迎任何指导。

Answer 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事件。这是更新的stack blitz

（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]的{{1}}属性。

<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 }, ];。这是一个stackblitz演示。

Answer 2

@LLai的答案是正确的，但是您可能已经注意到，当我们将对象用作mat-select-option [value]

时，角度材料选择不起作用

为解决此问题，Angular材质提供了[compareWith]输入。

@Input（） compareWith：（o1：任何，o2：任何）=>布尔值

用于在以下情况下将选项与所选值进行比较的函数确定应该显示哪些选项。首先参数是选项的值。第二个是来自所选值。必须返回布尔值。

例如，

list-selection.component.ts

export class ListSelectionExample {

  selectedOptions = [{name: 'Boots', id:1}];
  compareFunction = (o1: any, o2: any)=> o1.id===o2.id;

  typesOfShoes: {name: string, id: number }[] = [
    {name: 'Boots', id: 1}, 
    {name: 'Clogs', id: 2},
    {name: 'Loafers', id: 3 },
    {name: 'Moccasins', id: 4},
    {name: 'Sneakers', id:5}
  ];
}

list-selection.component.html

<mat-selection-list [(ngModel)]="selectedOptions" [compareWith]="compareFunction">
  <mat-list-option *ngFor="let shoe of typesOfShoes" [value]="shoe">
    {{shoe.name}}
  </mat-list-option>
</mat-selection-list>

<p>
  Options selected: {{selectedOptions | json}}
</p>

在此处找到live Stackblitz example

Answer 3

您可以使用selectionChange事件发射器来触发控制器功能。

<mat-selection-list 
   id="areaListControl"
   name="areaListControl"
   (selectionChange)="onChange($event)"
>
    <mat-list-option 
       *ngFor="let tta of taskTypeAreas" 
       [selected]="tta.selected"
       [value]="tta"
    >
        {{tta}}
    </mat-list-option>
</mat-selection-list>

在控制器中：

onChange(change: MatSelectionListChange) {
   console.log(change.option.value, change.option.selected);
}

绑定角度材料选择列表

3 个答案: