PrimeNG 中的自定义全局过滤器（FilterService）

Question

我在 PrimeNG 中过滤 p 表时遇到问题。 场景：

表包含： 约翰·开尔文·多伊

搜索关键词：John Doe

预期：1 行，我使用内置过滤器得到 0 行；

我尝试了内置过滤器，但我得到了 0 条记录。

我创建了一个自定义全局过滤器，检查输入是否有两个单词，然后检查

startsWith

和

endsWith

过滤器。

onGlobalFilter(table: Table, event: Event) {
    table.filterGlobal((event.target as HTMLInputElement).value, 'customContains');
}

private configureFilter () {
    // build-in filter
    let containsFilter = this.filterService.filters['contains']; 
    let startsWithFilter = this.filterService.filters['startsWith']; 
    let endsWithFilter = this.filterService.filters['endsWith']; 

    // register  custom filter
    this.filterService.register("customContains", (value, filter): boolean => {
        if (filter === undefined || filter === null || filter.trim() === '') {
            return true;
        }
        if (value === undefined || value === null) {
            return false;
        }
        const str = filter.trim().split(" ");
        if (str.length === 2 ) {
            console.log(filter)

            return startsWithFilter(value, str[0]) &&  endsWithFilter(value, str[1]);
        } else {
            return containsFilter(value, filter); 
        }
    });
}

场景2： 搜索关键词： 约翰·曼·多伊 表条目：john man doe han

以上过滤器不起作用。

我正在寻找一个能够为 N 个单词提供正确结果的解决方案。

Answer 1

约翰·开尔文·多伊

不包含

约翰·多伊

它包含 John，并且包含 Doe，但不包含 John Doe。如果您想查找包含这两个单词的条目，那么您需要搜索这两个单词的 contains 过滤器，并在它们之间放置一个 && 。

约翰·万·韩

开始于

约翰·曼·多伊

但不以

结尾

约翰·曼·多伊

因此，它以约翰·曼·多伊开始并以它结束是不正确的。所以，而不是你的

        const str = filter.trim().split(" ");
        if (str.length === 2 ) {
            console.log(filter)

            return startsWithFilter(value, str[0]) &&  endsWithFilter(value, str[1]);
        } else {
            return containsFilter(value, filter); 
        }

我推荐

        const str = filter.trim().split(" ");
        for (let f of filter) {
            if (!containsFilter(value, f)) return false;
        }
        return true;

作为解决方案。基本上，我们按空格分解过滤器，然后循环这些项目，然后检查每个项目是否包含在

value

中。

Answer 2

不确定这是否与最新的 PrimeNG 表匹配。

<p-table
 ...
 [globalFilterFields]="['column_name']">

  <button (click)="table.filterGlobal(['ValueOne', 'ValueTwo'], 'in')"></button>

关键是“约束”

in

。请参阅过滤器服务限制