Angular Mat Select Multiple selectionchange 查找更改了哪个选项

Question

我有一个带有multiple 选项集的<mat select>（多选）。当selectionChange 事件触发时，我需要知道哪个选项已被选中或未选中，但是，它只返回新的当前选定选项列表。

例如我有一个列表：

<mat-select (selectionChange)="change($event)" multiple placeholder="Select">
  <mat-option value="1">one</mat-option>
  <mat-option value="2">two</mat-option>
  <mat-option value="3">three</mat-option>
  <mat-option value="4">four</mat-option>
</mat-select>

如果选项one、three 和four 被选中，然后用户未选中选项four，在事件处理程序中我需要知道哪个选项触发了事件（即选项four）及其新状态。我目前在selectionChange 事件中看不到访问该信息的方法。

https://stackblitz.com/edit/angular-1e9gsd?file=app/select-overview-example.ts

我尝试将事件处理程序 (selectionChange)="change($event)" 放在 <mat-option> 上，但似乎不受支持。

Answer 1

这是替代解决方案。 onSelectionChange 事件在 [(ngModel)] 绑定之前触发。就我而言，我需要绑定数据和最后选择的值。

<mat-select multiple [(ngModel)]="selectedValues" name="hebele" #select>
<mat-option #matOption *ngFor="let value of data.Values" (click)="yourMethod(matOption)" [value]="value">
        {{value.Text}}
</mat-option>
</mat-select>

 yourMethod(data: any) {
   let lastSelectedValue = data.value;
   const isChecked = data.selected;
 }

Answer 2

这对我有用。在这种情况下，blahs 是一个字符串数组。使用2-way binding：

<mat-select placeholder="choose..." [(value)]="selected" 
      (selectionChange)="somethingChanged(selected)">
  <mat-option *ngFor="let b of blahs; index as i;" value={{b[i]}}">{{b[i]}}
  </mat-option>
</mat-select>

Answer 3

我需要在<mat-option> 上使用onSelectionChange，这与您可以在<mat-select> 上使用的selectionChange 不同

如果 mat-select 的文档中有此内容，那就太好了。

它正在工作https://stackblitz.com/edit/angular-1e9gsd-34hrwg?file=app/select-overview-example.html