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

Posted 2023-02-22

【中文标题】Angular Mat Select Multiple selectionchange 查找更改了哪个选项

【英文标题】：Angular Mat Select Multiple selectionchange finding which option was changed

【发布时间】：2018-11-09 22:01:02

【问题描述】：

我有一个带有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> 上，但似乎不受支持。

【问题讨论】：

事件中有没有，console.log(event.value);

new selection 不是 new value 吗？你可以解释吗 ？ console.log(event.value); 对我来说看起来不错。看来您必须澄清您的问题。

对不起。我搞砸了这个例子......它应该是一个多选，就像标题所说......现在修复了这个例子。 Event.value 会返回一个包含所有选择的数组。我只想要选择的新事物，最好不要缓存旧的选择值并进行比较以查找更改的内容。

【参考方案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;
 

【讨论】：

效果很好！谢谢

【参考方案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>

【讨论】：

这是标准选择。问题是指多选。该提议的解决方案将仅输出多选的当前值。不是在更改选择更改事件期间选中或取消选中哪个选项。

【参考方案3】：

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

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

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

【讨论】：

您知道 mat-option 的文档在哪里吗？我只能找到 mat-select 的 API

@NickGallimore 我也找不到<mat-option>的任何文档

@Curtis Upvote this issue github.com/angular/components/issues/8790 同时，您可以使用它来查看组件具有哪个输出和输入github.com/angular/components/blob/master/src/material/core/…