Question

我有一个mat select有多个选项。但是，我需要知道选择何时发生变化，确切的变化是什么。

例如，如果我有一个清单：

<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">for</mat-option>
</mat-select>

当selectionChange被触发时，它返回新选择的内容。但我需要知道正在改变的新价值是什么。我该如何访问？

例如，如果选择了1和3，然后用户选择了4，我需要知道他们选择了4但我没有看到在事件信息中访问该方法的方法。

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

我尝试将(selectionChange)="change($event)"部分放在<mat-option>上，但它似乎不是受支持的事件触发器。

Answer 1

我需要在onSelectionChange上使用<mat-option>，这与selectionChange

上可以使用的<mat-select>不同

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

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

Answer 2

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

<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 3

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

blahs

角度垫选择多个选择更改查找哪个选项已更改

3 个答案: