绑定角度材料选择列表

Question

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

我在一个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选择列表事件.这是更新的堆叠闪电战

(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在加载时选择.这是一个stackblitz演示这个.

Answer 2

@LLai 的回答是正确的，但是您可能已经注意到，当我们将对象用作对象时，Angular 材质选择不起作用mat-select-option [value]

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

@Input() compareWith: (o1: any, o2: any) => boolean

在确定哪些选项应显示为选定时，用于将选项与选定值进行比较的函数。第一个参数是选项的值。第二个是所选值中的一个值。必须返回一个布尔值。

例如，

列表选择.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}
  ];
}

列表选择.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>

在此处找到实时 Stackblitz 示例

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