代码之家 › 专栏 › 技术社区 › TDC

绑定角度材质选择列表

angular-material angular

TDC · 技术社区 · 8 年前

我正在使用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>

欢迎您的指导。

3 回复 | 直到 7 年前

Frederik Struck-Schøning 7 年前

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

(角度5.0.0之前的原始答案)

似乎mat选择列表当前不支持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" ...>

为此,需要向数组中添加另一个属性。

//组件。输电系统

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

这将使 Area 3 加载时选择。这是一个 stackblitz 演示此。

Ankit Prajapati 6 年前

您可能已经注意到,当我们将对象用作 mat-select-option [value]

为了解决这个问题,Angular material提供了 [compareWith] 输入

@输入() 比较:(o1:any,o2:any)=>布尔型

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

例如

列出所选内容。组成部分输电系统

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

列出所选内容。组成部分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

strttn 6 年前

您可以使用 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);
}