Angular中使用angular2-multiselect获取多选选中值问题

嘿，这个场景我太熟悉了！当selectedItems返回的是对象数组时，我们只需要简单处理就能提取出后端需要的数据，下面给你几种常用的方案：

1. 提取单个字段（比如只需要id） #

如果你的后端只需要选中项的id数组，直接用数组的map方法就能搞定：

// 从选中对象数组中提取id字段，生成纯id数组
const selectedIds = this.selectedItems.map(item => item.id);

// 把这个数组传入POST请求的body
this.http.post('/api/your-target-endpoint', { selectedIds: selectedIds })
  .subscribe(response => {
    // 处理请求响应
  });

要是需要的是itemName，把item.id换成item.itemName就行~

2. 生成自定义结构的对象数组 #

如果后端需要的是特定结构的对象（比如重命名字段、只保留部分属性），同样用map来改造：

// 按照后端要求的格式重组数据
const formattedSelectedItems = this.selectedItems.map(item => ({
  itemId: item.id, // 把原id重命名为itemId
  displayName: item.itemName // 把itemName改成displayName
}));

// 发送POST请求
this.http.post('/api/your-target-endpoint', { items: formattedSelectedItems })
  .subscribe(response => {
    // 处理响应逻辑
  });

3. 生成逗号分隔的字符串（部分后端需要这种格式） #

如果后端接受的是用逗号分隔的id字符串（比如"x,y"），可以在map之后用join拼接：

const selectedIdsStr = this.selectedItems.map(item => item.id).join(',');

this.http.post('/api/your-target-endpoint', { selectedIds: selectedIdsStr })
  .subscribe(response => {
    // 处理响应
  });

小提示 #

为了避免selectedItems为空时出现报错，可以用可选链操作符做个安全处理：

const selectedIds = this.selectedItems?.map(item => item.id) || [];

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