如何获取mat-select多选时单个选中/取消项的ID

在Angular的多选mat-select中，selectionChange事件默认返回所有已选中项的数组。要获取本次操作（选中/取消）的单个地点ID，可通过对比上一次选中状态和当前选中状态来实现，具体步骤如下：

1. 维护上一次选中状态变量 #

在组件类中定义变量，用于存储上一次的选中项数组：

previousSelectedLocations: number[] = [];

2. 初始化同步选中状态 #

在组件初始化时，将初始选中值同步到该变量（确保初始状态一致）：

ngOnInit(): void {
  // 若使用ngModel，同步初始选中值
  this.previousSelectedLocations = [...this.locationNameSelectedItems];
  // 若使用formControl，也可从表单控件取值
  // this.previousSelectedLocations = [...this.locationForm.get('locationName')?.value || []];
}

3. 实现对比逻辑获取更改项 #

在OnAgencyLocationSelect方法中，对比当前选中数组和上一次的数组，找出差异项：

OnAgencyLocationSelect(event: any): void {
  const currentSelected = event.value;
  let changedId: number | undefined;

  // 判断是选中还是取消操作，找出差异ID
  if (currentSelected.length > this.previousSelectedLocations.length) {
    // 选中操作：当前数组比之前多一个，找新增的ID
    changedId = currentSelected.find((id: number) => !this.previousSelectedLocations.includes(id));
  } else {
    // 取消操作：当前数组比之前少一个，找移除的ID
    changedId = this.previousSelectedLocations.find((id: number) => !currentSelected.includes(id));
  }

  if (changedId) {
    // 这里处理你的业务逻辑，比如拿到changedId做后续操作
    console.log('本次操作的地点ID:', changedId);
  }

  // 更新上一次选中状态，供下次对比使用
  this.previousSelectedLocations = [...currentSelected];
}

注意事项 #

• 如果下拉列表或初始选中值是异步加载的，需在数据加载完成后再同步previousSelectedLocations，避免初始状态不一致。
• 确保compareFn函数正确实现，保证选项的选中状态判断准确。

你的模板代码无需修改，保持原结构即可：

<mat-form-field class="w-100">
  <mat-select [(ngModel)]="locationNameSelectedItems" formControlName="locationName" [compareWith]="compareFn" multiple
    (selectionChange)="OnAgencyLocationSelect($event)">
    <mat-option *ngFor="let location of locationNameDropdownList" [value]="location.id">{{location.itemName}}</mat-option>
  </mat-select>
</mat-form-field>

内容的提问来源于stack exchange，提问作者noclist