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
相关产品推荐
相关产品推荐

