基本上所有信息均在标题中提供。
在我看来，我绑定到可用的filtermatchmodes（包含，等于，endswith，startswith）。在我的用例中，我的列字段是一个数组，没有一个值。
我指定的列看起来像这样：
<p-column field="types" [filter]="true" header="{{'AIRPORTS.TYPES' | translate}}">
<template let-airport="rowData" pTemplate="body">
<span *ngFor="let type of airport.types; let isLast = last">
{{('AIRPORTS.' + type) | translate}}{{isLast ? '' : ', '}}
</span>
</template>
<template pTemplate="filter" let-col>
<p-dropdown [options]="choices"
[style]="{'width':'100%'}"
(onChange)="airportsDataTable.filter($event.value,col.field,col.filterMatchMode)"
styleClass="ui-column-filter">
</p-dropdown>
</template>
</p-column>
i也有一个类似的问题，在该问题中，我必须使用多个可选的滤波器值过滤数组列数据（从 p-multiSelect中，因此过滤器也是一个数组）。我想出了一种在原始源代码的一些帮助下扩展可用的filtermatchmodes的方法。不幸的是，我不能保证它是一个很好的做法，但是，嘿，在我使用的版本中（Primeng 4.1.2）它有效。
您可能必须适应和调整过滤器功能，以适应您的需求，但这是我的解决方案在您的情况下的样子（使用p-dropdown）：
- 在视图中，将数据表导出到模板 - 卷量变量（
#dt） - 使其可以通过
@ViewChild-decorator在组件中访问 - 直接将自己的过滤器功能直接添加到DataTable的过滤器阵列（在
ngOnInit()中）
component.ts
@Component({...})
export class DatatableComponent implements OnInit {
...
@ViewChild('dt') dt: DataTable;
...
ngOnInit() {
this.dt.filterConstraints['inCollection'] = function inCollection(value: any[], filter: any): boolean {
// value = array of data from the current row
// filter = value from the filter that will be searched in the value-array
if (filter === undefined || filter === null) {
return true;
}
if (value === undefined || value === null || value.length === 0) {
return false;
}
for (let i = 0; i < value.length; i++) {
if (value[i].toLowerCase() === filter.toLowerCase()) {
return true;
}
}
return false;
}
}
}
在您的视图中，您可以通过将列的filtermatchmode设置为以前的名称来使用新的滤波器功能：
component.html
<p-dataTable #dt ...>
...
<p-column field="types" filterMatchMode="inCollection" header="{{'AIRPORTS.TYPES' | translate}}">
<template let-airport="rowData" pTemplate="body">
<span *ngFor="let type of airport.types; let isLast = last">
{{('AIRPORTS.' + type) | translate}}{{isLast ? '' : ', '}}
</span>
</template>
<template pTemplate="filter" let-col>
<p-dropdown [options]="choices"
[style]="{'width':'100%'}"
(onChange)="dt.filter($event.value,col.field,col.filterMatchMode)"
styleClass="ui-column-filter">
</p-dropdown>
</template>
</p-column>
...
</p-dataTable>
我在视图中所做的所有内容都设置了filterMatchMode，否则我复制了您的代码。（我还将模板引用重命名为#dt，以使其更短并且更可读）
提示：您在此列中不需要[filter]=true，因为标准过滤器不会显示您的列具有自定义过滤器网板。
正如我提到的，使用这样的自定义过滤器函数，例如，您可以使用p-multiSelect滤波器（嵌套在滤波器功能中的嵌套环）实现过滤数组数据，搜索数组中的子字符串或您可以想到的其他内容。<<<<<<<<<<
作为一个简单的解决方法，您可以直接更改过滤器：
import { FilterUtils } from 'primeng/utils';
FilterUtils['filterTest'] = (value, filter) => value <= filter && value >= filter;
this.dt.filter(search, 'field', 'filterTest');
在此GitHub问题中，我们看到它们删除了filterConstraints，可以与先前的PrimeNG版本一起使用以扩展过滤器功能。
所以...如果您像我一样使用PrimeNG版本9，则可以使用FilterUtils。
import { FilterUtils } from 'primeng/utils';
/**
* Custom filter to be used with PrimeNG Table
* https://www.primefaces.org/primeng/showcase/#/table
* Once we upgrade to version 11, this can be improved with FilterService:
* https://www.primefaces.org/primeng/showcase/#/filterservice
*/
setupCustomTableFilter() {
FilterUtils['customContains'] = function customContains(value: any, filter: any): boolean {
if (filter === undefined || filter === null)
return true;
if (value === undefined || value === null || value.length === 0)
return false;
let searchStringParts = filter.toLowerCase().split(' ') as string[];
let columnValue = value.toString().toLowerCase();
//debugger;
// Make sure that all string parts are containedincluded in the column value...
var isMatch = searchStringParts.every(p => columnValue.includes(p));
return isMatch;
}
}
请注意，您需要从import { FilterUtils } from 'primeng/utils';
可以在任何地方使用它，可以在app.component.ts文件中定义上方的代码。
最新版本的Primeng是目前11点添加了FilterService，这使得实现自定义过滤器变得更加简单。