如何在primeng数据表中预设（以编程方式）过滤器值

Question

使用 angular (4.1.3) 和 primeng (4.0.3) 数据表我需要设置过滤器值（例如来自 URL 参数）。

primeng (https://www.primefaces.org/primeng/#/datatable/filter) 有一个关于自定义过滤器的非常好的文档。 我尝试使用 Primeng InputText 组件作为自定义过滤器类似地实现它：

<p-dataTable 
      [value]="licenses" scrollable="true"
      exportFilename="licenses" 
      sscrollHeight="60vh" [paginator]="true" [rows]="20"  [pageLinks]="10" [rowsPerPageOptions]="[5,10,20,50,100,999999]" #dt>

        <p-column [style]="{'width':'180px'}" [sortable]="true" field="customerId" header="Customer ID" [filter]="true" filterMatchMode="contains" filterPlaceholder="Search">

          <ng-template pTemplate="filter" let-col>
            <input type="text" pInputText [(ngModel)]="custFilter" style="width:100%" (onChange)="dt.filter($event.value,col.field,col.filterMatchMode)" class="ui-column-filter"/>
          </ng-template>

        </p-column>

        ...

</p-dataTable>

现在我有一个输入字段，它看起来像“常规”字段，甚至还有一个来自我的组件的“custFilter”模型作为预选的过滤器值。

唯一的问题是，这个自定义过滤器不起作用。无论我输入哪个值，它都不会过滤（与“常规”primeng 数据表过滤器相反）。 Here is a screenshot

Answer 1

在进一步调试类型脚本代码的同时，我找到了一种进行过滤的方法。输入应如下所示：

<input #filtr type="text" pInputText [(ngModel)]="custFilter" style="width:100%" (input)="dt.filter($event.srcElement.value,col.field,col.filterMatchMode);" class="ui-column-filter"/>

主要区别在于，（input）而不是（onChange）和“$event.srcElement.value”而不是“$event.value”

此外，为了在页面和数据初始加载后实现初始过滤，必须从相应组件内调度输入事件：

...
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
...
export class DataComponent implements OnInit {
  @ViewChild(('dt')) dt: DataTable;
  @ViewChild(('filtr')) filtr: ElementRef;
    private initData(): void {
        this.dataService
          .getData()
          .then(data => {
            this.data = data;

            //After the data is loaded, the filtering has to be triggered.
            //A timeout is needed to avoid weird browser console logs if data isn't fully loaded into datatable yet before filtering
            setTimeout(() => {
              //console.log(this.filtr);
              var event = new Event('input', {
                  'bubbles': true,
                  'cancelable': true
              });
              this.filtr.nativeElement.dispatchEvent(event);

              //One could also call "filter" directly instead of dispatching an input event
              //Working example: this.dt.filter(this.custFilter,"customerId", "contains"); 
              //But emmiting an event seems to be better, because no filterMatchMode has to be 
              //hardcoded and is taken from template
            }, 50); 
          }).catch(this.handleError);
      }

      ngOnInit(): void {
        this.initLicenses();
      }

Answer 2

如果您想设置 p-table 的全局过滤器，那么以下步骤将有所帮助：

1. import { TableModule, Table } from 'primeng/table';

2. @ViewChild('mytable') public dataTable: Table;

3. 表格名称：在 HTML 页面中设置一些名称，例如：

<p-table #mytable [columns]="scrollableCols" [(first)]="tablePageNumber" 
[value]="priceDiffApiData" [frozenColumns]="frozenCols" [scrollable]="true" 
[paginator]="true" [rows]="10" frozenWidth="{{FrozenColsWidth}}px" 
(onPage)="paginate($event)" [globalFilterFields]="cols">

4. 在里面，设置延迟1秒让viewchild元素在绑定后读取对象：

ngOnInit(){
setTimeout(() => {
            //set filter value of table
            if (this.dataTable !== undefined) {
                this.dataTable.filterGlobal('searchKey', 'contains');   }
        }, 1000);
}