angular - primeNG filter customize

Question

Is it possible to customize DataTable filter in PrimeNG? I have a requirement to filter data from outside of the p-dataTable or from another component - such as a left rail that will filter datatable on the right side of left rail (see attached image).

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

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