Ng-select：清除组件内容时获取选中项的历史值

当前你使用(change)事件时，清空ng-select后$event返回undefined，这是因为该事件传递的是变更后的新值，清空操作的新值就是undefined。要获取清空前的旧值，需要提前存储每个选项的历史选中状态，具体实现如下：

步骤1：在组件类中维护旧值存储对象 #

定义一个对象来记录每个constant对应的历史选中值：

// 组件类中
previousSelections: { [key: string]: any } = {};

步骤2：初始化旧值存储 #

在组件初始化或selectedConstant数据加载完成后，将初始选中值同步到存储对象中：

ngOnInit() {
  // 假设selectedConstant已完成初始化
  Object.keys(this.selectedConstant).forEach(key => {
    this.previousSelections[key] = this.selectedConstant[key];
  });
}

步骤3：修改模板事件传递参数 #

更新ng-select的(change)事件，同时传递旧值和新值：

<ng-select [items]="importerFields" [(ngModel)]="selectedConstant[constant.constant_name]" bindLabel="label"
           [multiple]="constant.allow_match_with_multiple_constants"
           [closeOnSelect]="!constant.allow_match_with_multiple_constants" appendTo="body"
           placeholder="{{ ('IMPORTER.FILES_COLUMN' | translate).replace('CONSTANT_NAME', constant.label) }}"
           (change)="constantChanged(constant, previousSelections[constant.constant_name], $event)">
</ng-select>

步骤4：更新事件处理函数 #

修改constantChanged方法，接收旧值并处理，同时更新存储的旧值：

constantChanged(constant: any, oldValue: any, newValue: any) {
  // 使用oldValue获取清空前的选中值，newValue为当前新值（清空时为undefined）
  console.log(`常量${constant.label}清空前的值:`, oldValue);
  console.log(`常量${constant.label}当前值:`, newValue);

  // 更新存储的旧值，为下一次变更做准备
  this.previousSelections[constant.constant_name] = newValue;
}

这样就能在清空ng-select时，通过oldValue参数获取到清空之前的选中值了。

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