匹配模式更改的primeng列过滤器答案

【问题标题】：primeng column filter on match mode change匹配模式更改的primeng列过滤器
【发布时间】：2022-07-27 18:00:04
【问题描述】：

我有一个带有过滤器的表，定义如下：

<p-columnFilter ... >
    <ng-template pTemplate="filter" let-value let-filterCallback="filterCallback">
        <ng-container [ngSwitch]="matchMode">
            <filter-one *ngSwitchCase="contains"></filter-one>
            <filter-two *ngSwitchCase="startsWith"></filter-two>
        </ng-container>
    </ng-template>
</p-columnFilter>

通过在不同的匹配模式之间切换，我希望改变过滤器的显示方式。我的问题是primeng列过滤器没有暴露它的匹配模式（没有事件）所以我无法对匹配模式的变化做出反应。

【问题讨论】：

标签： primeng-datatable

【解决方案1】：

我遇到了同样的问题，您需要将列过滤器保存为模板变量（下面的#colFilter），然后您可以在模板中访问它。匹配模式不是直接在 ColumnFilter 上，而是存储在表中，由 ColumnFilter 引用，就像你 can see here 一样，要在模板中访问它，我们在表 colFilter.dt.filters[field] 的过滤器中检索我们的过滤器（并将其转换为 any 以避免错误，因为它也可能是一个过滤器数组，但我们假设它不是），然后我们可以访问它的matchMode。

<p-columnFilter ... [field]="field" #colFilter>
    <ng-template pTemplate="filter" let-value let-filterCallback="filterCallback">
        <ng-container [ngSwitch]="$any(colFilter.dt.filters[field]).matchMode">
            <filter-one *ngSwitchCase="contains"></filter-one>
            <filter-two *ngSwitchCase="startsWith"></filter-two>
        </ng-container>
    </ng-template>
</p-columnFilter>

【讨论】：