PrimeNg p-columnFilter内嵌p-multiSelect搜索无结果如何解决？

问题根因 #

该问题由两个核心原因导致：

• p-columnFilter 默认会监听内部的输入事件，将 p-multiSelect 自带搜索框的输入误判为列过滤的输入，拦截并干扰了 p-multiSelect 本身的搜索逻辑
• p-multiSelect 的搜索功能未显式配置搜索字段，导致搜索逻辑无法正确匹配选项

解决方案 #

1. 修正模板代码 #

在原有 p-multiSelect 配置基础上新增搜索相关配置，同时阻止输入事件冒泡到上层 p-columnFilter：

<th class="table-header-primary" [ngStyle]="{'width':'200px'}" [pSortableColumn]="'docCategory'">Type
  <p-columnFilter  class="p-ml-auto" type="text" field="doctypeLabel"  matchMode="in" display="menu"  [showApplyButton]="false" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
    <ng-template pTemplate="filter" let-value let-filter="filterCallback">
      <p-multiSelect 
        [(ngModel)]="doctypeLabel" 
        [options]="_doctypeLabelList"  
        placeholder="Select" 
        (onChange)="filter($event.value)"
        <!-- 新增配置开始 -->
        [filter]="true"
        <!-- 若你的选项是对象数组，将下面两个属性的取值替换为你实际要展示、搜索的字段名；若为字符串数组可删除这两个属性 -->
        optionLabel="label"
        filterBy="label"
        <!-- 阻止输入事件冒泡，避免被p-columnFilter拦截 -->
        (keydown)="$event.stopPropagation()"
        (input)="$event.stopPropagation()"
        <!-- 新增配置结束 -->
      >
      </p-multiSelect>
      </ng-template>
  </p-columnFilter>
</th>

2. 修正TypeScript变量初始值 #

p-multiSelect 是多选组件，绑定值应为数组类型而非字符串：

_doctypeLabelList:any[]=[];
// 初始值从空字符串改为空数组
doctypeLabel:any[] = [];
constructor() {
}

修改完成后即可正常使用 p-multiSelect 的搜索功能，原有列过滤逻辑不受影响。

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