Javascript 覆盖面板在错误位置显示箭头（涂底漆）

我有一个p-table，我使用一个p-OverlyPanel进行过滤。问题是重叠面板显示的箭头错误。箭头显示在右侧，我希望它显示在左侧。看到图片了吗

在此图像中，覆盖面板必须与名为username的行相关联

这是我的span HTML代码

   <span class="filter-button" *ngIf="col.filter">
              <p-button id={{col.field}} styleClass="no-bg-button" icon="fas fa-filter"
                [style]="{'padding':0, 'width': '20px', 'height': '20px'}" (click)="filter($event, col.field)">
              </p-button>
   </span>

在跨度中单击时，将显示覆盖面板。设置表格宽度或更改css的解决方案对我不起作用。有解决办法吗

版本：8.2.14 预涂版本：8.1.1 试一试

试一试

 <p-overlayPanel #filterOverlay id="overlay">
  <input [(ngModel)]="filterInput" pInputText type="text"
    (input)="incTable.filter($event.target.value, filterField, 'contains')" placeholder=""/>
 </p-overlayPanel>

filter(event: Event, field: string) {
  event.preventDefault();
  event.stopPropagation();

  this._incTable.reset();
  this.filterField = field;
  this.filterInput = '';
  this.filterOverlay.toggle(event);
}

[appendTo]="'body'"