ng-multiselect-dropdown多选框问题：取消选项后ID未从数组移除

方案一：直接利用FormControl的value获取选中项ID（推荐） #

你已经绑定了formControlName，无需手动维护数组，表单控件会自动同步选中/取消状态，这是最简洁可靠的方式。

1. 初始化表单时，给对应控件设置空数组默认值：

// 假设你的表单通过FormBuilder创建
this.yourForm = this.fb.group({
  tags: [[]],
  stores: [[]]
});

2. 发送PUT请求时，直接从表单控件提取选中项的ID：

// 提取选中标签的ID数组
const selectedTagIds = this.yourForm.get('tags').value.map(item => item.id);
// 提取选中店铺的ID数组
const selectedStoreIds = this.yourForm.get('stores').value.map(item => item.id);

// 组装请求体发送PUT请求
const requestBody = {
  tags: selectedTagIds,
  stores: selectedStoreIds
  // 其他接口所需字段...
};

this.http.put('你的接口地址', requestBody).subscribe(res => {
  // 请求成功处理逻辑
});

方案二：手动维护ID数组（处理全量选中/取消事件） #

如果必须手动维护数组，需要同时监听选中、取消单个选项以及取消全选的事件，避免ID残留：

1. 模板中补充绑定取消相关事件：

<ng-multiselect-dropdown
  class="col-4 ng2-select-dropdown"
  [placeholder]="'Select Tags'"
  formControlName="tags"
  id="select_tags"
  [settings]="dropdownTagsSettings"
  [data]="tagsList"
  (onSelect)="onItemSelectTags($event)"
  (onDeSelect)="onItemDeselectTags($event)"
  (onDeSelectAll)="onDeselectAllTags()"
>
</ng-multiselect-dropdown>

<ng-multiselect-dropdown
  class="col-4 ng2-select-dropdown"
  [placeholder]="'Select Stores '"
  [settings]="dropdownStoreSettings"
  [data]="myStores"
  formControlName="stores"
  (onSelect)="onItemSelect($event)"
  (onDeSelect)="onItemDeselect($event)"
  (onDeSelectAll)="onDeselectAllStores()"
>
</ng-multiselect-dropdown>

2. 组件类中实现事件处理逻辑：

// 初始化存储选中ID的数组
selectedTagIds: number[] = [];
selectedStoreIds: number[] = [];

// 选中单个标签
onItemSelectTags(event: any) {
  if (!this.selectedTagIds.includes(event.id)) {
    this.selectedTagIds.push(event.id);
  }
}

// 取消单个标签
onItemDeselectTags(event: any) {
  const index = this.selectedTagIds.indexOf(event.id);
  if (index > -1) {
    this.selectedTagIds.splice(index, 1);
  }
}

// 取消所有标签
onDeselectAllTags() {
  this.selectedTagIds = [];
}

// 选中单个店铺
onItemSelect(event: any) {
  if (!this.selectedStoreIds.includes(event.id)) {
    this.selectedStoreIds.push(event.id);
  }
}

// 取消单个店铺
onItemDeselect(event: any) {
  const index = this.selectedStoreIds.indexOf(event.id);
  if (index > -1) {
    this.selectedStoreIds.splice(index, 1);
  }
}

// 取消所有店铺
onDeselectAllStores() {
  this.selectedStoreIds = [];
}

关键配置检查 #

确保你的下拉框配置中指定了idField和textField，对应选项对象的ID和显示文本字段：

dropdownTagsSettings = {
  idField: 'id', // 替换为你标签对象的ID字段名
  textField: 'name', // 替换为你标签对象的显示文本字段名
  // 其他配置...
};

dropdownStoreSettings = {
  idField: 'id', // 替换为你店铺对象的ID字段名
  textField: 'storeName', // 替换为你店铺对象的显示文本字段名
  // 其他配置...
};

内容的提问来源于stack exchange，提问作者Sameh M Darwish