primeNG过滤器自定义

Question

是否可以在DataTable中自定义PrimeNG过滤器？ 我需要从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);
    }
}

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