如何用管道动态排除PrimeNG下拉框选项？Angular多选联动需求

先修正基础代码（开启多选模式） #

首先你的下拉框需要开启多选，并且把ngModel改成数组类型（因为多选会选中多个值）：

<!-- 出发城市下拉框 -->
<p-dropdown
  [options]="sourceCities"
  [(ngModel)]="selectedSourceCities"
  optionLabel="name"
  multiple="true"
  placeholder="选择出发城市">
</p-dropdown>

<!-- 目的城市下拉框 -->
<p-dropdown
  [(ngModel)]="selectedDestinationCities"
  optionLabel="name"
  multiple="true"
  placeholder="选择目的城市">
</p-dropdown>

组件类里修正变量类型：

selectedSourceCities: {name: string, code: string}[] = [];
selectedDestinationCities: {name: string, code: string}[] = [];

sourceCities = [
  {name: 'New York', code: 'NY'},
  {name: 'Rome', code: 'RM'},
  {name: 'London', code: 'LDN'},
  {name: 'Istanbul', code: 'IST'},
  {name: 'Paris', code: 'PRS'}
];

destinationCities = [...this.sourceCities]; // 直接复用源数组，避免重复代码

方案一：优化管道处理多选 #

1. 修改管道逻辑 #

让管道支持接收多选的数组，通过code字段判断是否需要排除：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'excludeSelected'
})
export class ExcludeSelectedPipe implements PipeTransform {
    // value: 原始选项数组; excludedItems: 需要排除的已选数组
    transform(value: {name: string, code: string}[], excludedItems: {name: string, code: string}[]): any {
        if (!excludedItems || excludedItems.length === 0) {
            return value; // 没有选中项时返回原数组
        }
        // 提取已选城市的code集合
        const excludedCodes = excludedItems.map(item => item.code);
        // 过滤掉包含在已选code里的项
        return value.filter(item => !excludedCodes.includes(item.code));
    }
}

2. 在模板中使用管道 #

直接在目的城市下拉框的options上应用管道，传入已选的出发城市：

<p-dropdown
  [options]="destinationCities | excludeSelected: selectedSourceCities"
  [(ngModel)]="selectedDestinationCities"
  optionLabel="name"
  multiple="true"
  placeholder="选择目的城市">
</p-dropdown>

方案二：不用管道，使用Getter计算属性 #

这种方式更简洁，不需要额外创建管道，利用Angular的响应式特性自动更新：

在组件类中添加一个getter，返回过滤后的目的城市数组：

get filteredDestinationCities() {
    if (!this.selectedSourceCities || this.selectedSourceCities.length === 0) {
        return this.destinationCities;
    }
    const excludedCodes = this.selectedSourceCities.map(item => item.code);
    return this.destinationCities.filter(item => !excludedCodes.includes(item.code));
}

然后在模板中直接绑定这个getter：

<p-dropdown
  [options]="filteredDestinationCities"
  [(ngModel)]="selectedDestinationCities"
  optionLabel="name"
  multiple="true"
  placeholder="选择目的城市">
</p-dropdown>

额外注意事项 #

• 确保在app.module.ts中声明了你的管道（如果用方案一）：

import { ExcludeSelectedPipe } from './exclude-selected.pipe';

@NgModule({
  declarations: [
    // ...其他组件
    ExcludeSelectedPipe
  ],
  // ...其他配置
})
export class AppModule { }

• 用code而不是name作为判断依据，避免出现同名城市的误判（如果业务中存在这种情况）。

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