You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

PrimeNG TreeSelect绑定空数组时重复显示两次无结果提示

问题原因

该现象是PrimeNG TreeSelect组件的内置逻辑缺陷导致,和业务代码无关:当selectionMode配置为checkbox且options绑定的数组为空时,组件内部会同时渲染空选项占位提示、过滤无结果提示两个完全相同的提示块,最终呈现重复的无结果提示。

修复方案

你可以根据项目情况任选一种方案处理:

  • 临时CSS覆盖隐藏重复提示,无需修改组件逻辑,适配低版本PrimeNG项目:
/* 全局样式文件或者组件样式文件中添加该规则 */
p-treeSelect .p-treeselect-dropdown .p-treeselect-empty-message:nth-of-type(2) {
  display: none !important;
}
  • 外层增加条件渲染,自定义空状态提示,完全规避组件自带的重复提示问题:
<div class="card">
  <h5>Checkbox</h5>
  <ng-container *ngIf="testArray.length > 0; else emptyTip">
    <p-treeSelect [(ngModel)]="selectedItem" [options]="testArray" selectionMode="checkbox" 
      placeholder="Select Item">
    </p-treeSelect>
  </ng-container>
  <ng-template #emptyTip>
    <p class="p-treeselect-empty-message">暂无可用选项</p>
  </ng-template>
</div>
  • 升级PrimeNG版本,该bug在15.4.0及更高版本已经被官方修复,升级后无需额外处理即可恢复正常显示。

内容的提问来源于stack exchange,提问作者moka ka

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.25 04:45:04