Angular 6 如何将 PrimeNG 全局过滤器移到 <p-table> 之外？

Posted 2023-02-23

【中文标题】Angular 6 如何将 PrimeNG 全局过滤器移到 <p-table> 之外？

【英文标题】：Angular 6 how do I move a PrimeNG global filter outside of the <p-table>?

【发布时间】：2019-02-22 17:49:49

【问题描述】：

设计师的 UI 模拟要求我将全局搜索过滤器移到 p 表之外，但我不确定如何执行此操作，或者是否可能？有没有人有做类似事情的经验？我可以严格使用 CSS 样式来做到这一点，同时为不同的屏幕尺寸保持响应式布局吗？

<p-table #dt [value]="tags" [paginator]="true" [rows]="25" [columns]="cols" [resizableColumns]="true" [globalFilterFields]="['vendor']">
  <ng-template pTemplate="caption">
    <div style="text-align: right; overflow-x: hidden;">
      <p class="wrapper"><input type="text" class="search-vendors" pInputText size="50" placeholder="Search Vendors" (input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto"></p>
    </div>
  </ng-template>
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th class="col.class" *ngFor="let col of columns" [pSortableColumn]="col.field">
        <p-sortIcon [field]="col.field" *ngIf="col.field == 'fieldThree' || col.field == 'fieldOne' || col.field == 'fieldTwo' "></p-sortIcon>
        col.header
        <fa *ngIf="col.field == 'fieldThree' || col.field == 'fieldTwo'" name="info-circle" pTooltip="col.tooltip" tooltipPosition="right" showDelay="1000" hideDelay="500"></fa>
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-columns="cols">
    <tr [pSelectableRow]="rowData">
      <td *ngFor="let col of cols" [ngClass]="'toggle-tag': col.field==''">
        <div *ngIf="col.field == 'fieldThree'; then vendorRow"></div>
        <div *ngIf="col.field == 'fieldTwo' || col.field == 'domain' || col.field == 'fieldThree'; then default"></div>
        <ng-template #vendorRow><a (click)="showVendorDetails(rowData)">rowData[col.field]</a></ng-template>
        <ng-template #default>rowData[col.field]</ng-template>
      </td>
    </tr>
  </ng-template>
</p-table>

【问题讨论】：

@Shantanu 的解决方案对我有用，另外我必须在我的 TS 文件中添加 @ViewChild('dt1') dt1: ElementRef; 以便 dt1 可以在 p-table 之外访问。没有它，它会报错。

【参考方案1】：

是的，这是可能的。只需删除 p-table 内的 ng-template pTemplate="caption" 块并在 p-table 之外具有完全相同的输入字段（如下所示）

<input type="text" class="search-vendors" pInputText size="50" placeholder="Search Vendors" 
 (input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto">

这与p-table 内部的工作方式完全相同。然后，您可以在其上放置任何 CSS（以使其具有响应性和全部）。保持剩余的p-table 代码不变。

关注Official docs

【讨论】：

另一个问题：如果搜索输入需要进入父组件内部而不是 外部，我该怎么做？

@Smooth 为此，请使用 @ViewChild angular.io/guide/component-interaction 。检查这个答案***.com/questions/38974896/…

我能够利用@ViewChild 来触发子组件中的函数，但我不确定如何将引用传递给调用所需的“dt”表对象filterGlobal 函数。我无权访问父模板中的 dt 对象以进行传递？有什么想法吗？

你能上传你是如何使用@ViewChild的吗，因为我必须将全局过滤器移动到子组件，而p-table留在父组件中。

当我将输入移到表格外时，它不再识别 id，知道为什么吗？