PrimeNG下拉框pTemplate="filter"模板无法显示问题求助

我想在下拉选项列表上方添加搜索输入框，尝试用PrimeNG的<ng-template pTemplate="filter">实现，但模板始终不显示。

现有代码 #

HTML代码 #

<p-dropdown [options]="this.colaboradoresList" [(ngModel)]="this.currentColaborador" placeholder="Selecionar Colaborador" appendTo="body" filterBy="nomeCompleto" optionLabel="nomeCompleto">
  <ng-template pTemplate="filter">
    <span class="p-float-label">
      <input id="search-box" type="text" pInputText (input)="this.onSearchInput($event)">
      <label for="search-box">Procurar Colaborador</label>
    </span>
  </ng-template>
</p-dropdown>

TypeScript代码 #

onSearchInput(event) {
  if (event.value.trim().length == 0 || event.value.trim() == '') {
    this.colaboradoresList = [];
    return;
  }

  this.searchColaboradores.next(event.value); /* 调用API发起GET请求 */
  event.stopPropagation();
  return false;
}

注：this.colaboradoresList初始化为空数组，仅在搜索框输入内容后才会填充数据。当前效果：下拉框仅显示默认占位符，未出现自定义的搜索输入框。

解决方案 #

核心问题：未启用下拉框的过滤功能 #

PrimeNG的Dropdown只有在开启filter="true"属性时，才会渲染filter模板。你的代码中仅设置了filterBy，但未开启过滤开关，导致模板不显示。

修正后的代码 #

HTML调整（添加filter="true"，并移除默认过滤行为避免冲突）

<p-dropdown 
  [options]="this.colaboradoresList" 
  [(ngModel)]="this.currentColaborador" 
  placeholder="Selecionar Colaborador" 
  appendTo="body" 
  filter="true"  <!-- 开启过滤功能，渲染filter模板 -->
  [filterFunction]="() => true"  <!-- 禁用默认前端过滤，适配后端搜索逻辑 -->
  optionLabel="nomeCompleto"
>
  <ng-template pTemplate="filter">
    <span class="p-float-label">
      <input id="search-box" type="text" pInputText (input)="this.onSearchInput($event)">
      <label for="search-box">Procurar Colaborador</label>
    </span>
  </ng-template>
</p-dropdown>

TypeScript调整（优化空值判断逻辑）

onSearchInput(event: Event) {
  const inputElement = event.target as HTMLInputElement;
  const searchValue = inputElement.value.trim();

  if (!searchValue) {
    this.colaboradoresList = [];
    return;
  }

  this.searchColaboradores.next(searchValue); 
  event.stopPropagation();
}

额外说明 #

• 因为你是通过输入触发后端搜索获取选项列表，所以需要设置[filterFunction]="() => true"禁用Dropdown默认的前端过滤逻辑，避免自动过滤本地选项。
• 确保你的PrimeNG版本支持filter模板（PrimeNG 10+版本已支持该功能）。

内容的提问来源于stack exchange，提问作者2K MASSAS