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

Question

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

例如我有一个列表：

<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

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

上使用的 selectionChange 不同

如果在 mat-select 的文档中就好了。

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

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

这是替代解决方案。 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;
 }

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

Angular Mat Select Multiple selectionchange finding which option was changed

multi-select

angular-material

angular