Angular中如何从数组过滤掉多选下拉框选中的多个项

你可以通过以下方式实现需求：

核心思路 #

先从选中项数组中提取需要排除的用户名集合，再用数组的filter方法筛选出不在该集合中的用户。

具体代码实现 #

在你的Angular组件中可以这么写：

// 组件内定义的用户数组
users = [
  { name: 'John', email: 'johnson@mail.com', age: 25, address: 'USA' },
  { name: 'Tom', email: 'tom@mail.com', age: 35, address: 'England' },
  { name: 'Mark', email: 'mark@mail.com', age: 28, address: 'England' }
];

// 多选下拉框返回的选中项数组
selectedItems = [
  {"id":1,"name":"John"},                             
  {"id":2,"name":"Tom"}
];

// 过滤后得到的用户数组
get filteredUsers() {
  // 提取所有需要排除的用户名
  const excludedNames = this.selectedItems.map(item => item.name);
  // 筛选出不在排除列表中的用户
  return this.users.filter(user => !excludedNames.includes(user.name));
}

代码说明 #

• map方法：把selectedItems转换为仅包含用户名的数组，这里得到的结果是['John', 'Tom']
• filter方法：遍历原始用户数组，只保留不在排除列表里的用户，最终filteredUsers只会包含Mark这一条数据

这种用getter的写法会自动响应selectedItems的变化，选中项更新时过滤结果会同步刷新，适配Angular的响应式场景。

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