PrimeNG中P-chip的OnRemove关联P-confirmPopup失效问题求助

问题1：P-confirmPopup 位置异常且未等待确认就执行移除 #

位置修正 #

要让弹窗在指定div内弹出，需给p-confirmPopup绑定target属性指向目标容器的模板引用变量：

<div #popupContainer>
  <!-- 你的筛选组件与P-chip区域 -->
</div>
<p-confirmPopup [target]="popupContainer"></p-confirmPopup>

弹窗会挂载到popupContainer元素内部，而非屏幕末尾。

确认流程修正 #

之前直接在onRemove事件中执行移除逻辑，导致弹窗未生效。需通过ConfirmationService触发确认流程，等待用户操作后再执行移除：

1. 组件类注入服务：

import { ConfirmationService } from 'primeng/api';

constructor(private confirmationService: ConfirmationService) {}

2. 修改P-chip的事件绑定：

<p-chip 
  *ngFor="let filter of appliedFilters" 
  [label]="filter.label" 
  (onRemove)="confirmRemove(filter)">
</p-chip>

3. 实现确认逻辑：

confirmRemove(filter: any) {
  this.confirmationService.confirm({
    message: '确定要移除该筛选条件吗？',
    accept: () => {
      // 用户确认后执行移除
      this.appliedFilters = this.appliedFilters.filter(f => f !== filter);
      // 这里添加你的其他筛选更新逻辑
    },
    reject: () => {
      // 用户取消时无操作
    }
  });
}

问题2：P-chip 关闭图标无法移除（PrimeNG 11版本） #

PrimeNG 11中iconRemove是自定义关闭图标的属性，而非移除图标。要隐藏关闭图标，有两种方式：

1. 官方推荐方式：设置removable为false直接移除关闭按钮：

<p-chip 
  *ngFor="let filter of appliedFilters" 
  [label]="filter.label" 
  [removable]="false">
</p-chip>

2. 若需保留移除功能但隐藏图标（不推荐，用户无操作提示），用CSS隐藏：

.p-chip .p-chip-remove-icon {
  display: none;
}

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