primeNG 过滤器定制答案

【问题标题】：primeNG filter customizeprimeNG 过滤器定制
【发布时间】：2017-08-24 15:13:45
【问题描述】：

是否可以在PrimeNG 中自定义DataTable 过滤器？我需要过滤来自p-dataTable 外部或其他组件的数据 - 例如将过滤左侧导轨右侧的数据表的左侧导轨（参见附图）。

【问题讨论】：

标签： angular primeng angular-filters primeng-datatable

【解决方案1】：

您可以手动过滤数据。示例设置（伪代码）：

父组件（包含过滤器组件和DataTable）

模板：

...
<my-filter-component (onFilter)="Filter($event)"></my-filter-component>
...
<p-dataTable [value]="items" ...>
    ...
</p-dataTable>
...

代码：

export class MyItemListComponent
{
    private items: MyItemType[];
    ...
    Filter(eventData: MyFilterType){
        ...
        //extract filter values, process if needed(validate, etc.)
        ...
        //now we have all filter data in variable filter
        myItemFilterService.filter(filter).subscribe(data => {
            this.items = data;
        });
    }
}

过滤组件

模板

...
//your fields here bound to myFilter via NgModel

<input type="text" ... [(ngModel)] = "myFilter.Name" (keyup)="onSubmitFilter($event)">
...

代码：

export class MyFilterComponent {
    ...
    private myFilter: MyFilterType;
    ...
    @Output()
    public onFilter: EventEmitter<MyFilterType> = new EventEmitter<MyFilterType>();
    ...
    onSubmitFilter(){
        this.onFilter.emit(this.myFilter);
    }
}

注意：在每次击键时调用过滤器并不是一个好主意，因此您可能想要创建过滤器更改事件流并对其进行去抖动，但为简单起见，我省略了这一点。有关如何执行此操作的参考，您可以查看官方角度示例https://angular.io/tutorial/toh-pt6#observables

【讨论】：

感谢您的回答。我会尽快更新。
primeng 的人都是业余爱好者。 Datatable 是有史以来最糟糕的组件。他们说他们提高了数据表的性能，但他们错过了这样一个重要的特性，这是一个性能瓶颈