是否可以使用 PrimeNG DataTable 添加自定义过滤器功能？

Question

基本上所有信息都在标题中提供。

在我看来，我必须使用可用的 filterMatchModes（包含、in、equals、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>

Answer 1

我有一个类似的问题，我必须用多个可选择的过滤器值过滤数组列数据（来自 a p-multiSelect，所以过滤器也是一个数组）。我从原始源代码中找到了一种扩展可用 filterMatchModes 的方法。不幸的是，我不能保证这是一个好的做法，但是，在我使用的版本 (PrimeNG 4.1.2) 中，它可以工作。

您可能需要根据自己的需要调整和调整过滤器功能，但这是我的解决方案在您的情况下的样子（带有p-dropdown）：

• 在视图中，将 DataTable 导出为模板引用变量 ( #dt)
• 通过@ViewChild-decorator在组件中访问它
• 将您自己的过滤器函数直接添加到 DataTable 的过滤器数组中（在ngOnInit()）

组件.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 设置为您之前为其命名的内容来使用新的过滤器功能：

组件.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过滤器（过滤器函数中的嵌套循环）实现过滤数组数据，搜索数组中的子字符串或任何您能想到的。