Question

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

primeng（https://www.primefaces.org/primeng/#/datatable/filter）对自定义过滤器有很好的文档。我尝试使用primeng InputText组件作为自定义过滤器来实现它：

{{1}}

现在我有一个输入字段，看起来像“常规”字段，甚至还有一个来自我的组件的“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"/>

主要区别在于，（输入）代替（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表的全局过滤器，则以下步骤将有所帮助：

import { TableModule, Table } from 'primeng/table';
@ViewChild('mytable') public dataTable: Table;
表名：在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">

在内部，设置1秒的延迟以使viewchild元素在绑定后读取对象：

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

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

2 个答案: