primeNG过滤器自定义

Question

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

Answer 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);
    }
}

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

primeNG过滤器自定义

primeNG filter customize

angular

primeng

angular-filters

primeng-datatable