PrimeNG v5.2.4 p-table 全局过滤器不起作用答案

【问题标题】：PrimeNG v5.2.4 p-table global filter not workingPrimeNG v5.2.4 p-table 全局过滤器不起作用
【发布时间】：2018-11-11 06:28:03
【问题描述】：

我之前使用过 p-datatable 并且全局过滤器有效。但是，当我更改为 p-table 时，全局过滤器模板显示得很好，但输入框不可点击。

这是代码

<p-table #dt 
[value]="sensorLocationList" 
[columns]="cols" 
[(selection)]="selectedSl" 
sortMode="multiple" [paginator]="true" 
[rows]="20" 
[globalFilterFields]="['dummy1','dummy2','dummy3','dummy4']"
>

<ng-template pTemplate="caption">
        <div style="text-align: left">        
            <i class="fa fa-search" style="margin:4px 4px 0 0"></i>
            <input type="text" pInputText size="50" placeholder="Global Filter" (input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto">
        </div>
</ng-template>

标题：

<ng-template pTemplate="header" let-columns>
        <tr>
            <th style="width: 2.25em"></th>
            <th *ngFor="let col of columns" [pSortableColumn]="col.field">
                {{col.header}}
                <p-sortIcon [field]="col.field"></p-sortIcon>
            </th>
        </tr>
        <tr>
            <th style="width: 2.25em">
                <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
            </th>
            <th *ngFor="let col of columns" [ngSwitch]="col.field">
                <input *ngSwitchCase="'dummy1'" pInputText placeholder="Search" type="text" class="search-box" (input)="dt.filter($event.target.value, col.field, col.contains)">
                <input *ngSwitchCase="'dummy2'" pInputText placeholder="Search" type="text" class="search-box" (input)="dt.filter($event.target.value, col.field, col.contains)">
                <input *ngSwitchCase="'dummy3'" pInputText placeholder="Search" type="text" class="search-box" (input)="dt.filter($event.target.value, col.field, col.contains)">
                <input *ngSwitchCase="'dummy4'" pInputText placeholder="Search" type="text" class="search-box" (input)="dt.filter($event.target.value, col.field, col.contains)">
            </th>
     </ng-template>

还有一个身体样本：

<ng-template pTemplate="body" let-rowData let-columns="columns">
            <tr [pSelectableRow]="rowData">
                    <td [pEditableColumn]="rowData" [pEditableColumnField]="'dummy1'" [ngStyle]="cellEdit(rowData)">
                        <p-cellEditor>
                            <ng-template pTemplate="input">
                                <input pInputText type="text" [(ngModel)]="rowData.dummy1">
                            </ng-template>
                            <ng-template pTemplate="output">
                                {{rowData.dummy1}}
                            </ng-template>
                        </p-cellEditor>
                    </td>
             </tr>
</ng-template>
</p-table>

一切正常，包括列过滤器。我到处搜索解决方案，发现大部分问题是因为 PrimeNG 版本不是最新的，但我的版本已更新。任何想法？

【问题讨论】：

标签： primeng primeng-turbotable

【解决方案1】：

在表头标签中添加[pSortableColumnDisabled]="!col.sortable"：

<th *ngFor="let col of columns" [pSortableColumn]="col.field" [pSortableColumnDisabled]="!col.sortable">

【讨论】：

感谢您提供此代码 sn-p，它可能会提供一些有限的即时帮助。 proper explanation would greatly improve its long-term value 通过展示为什么这是一个很好的解决问题的方法，并将使其对未来有其他类似问题的读者更有用。请edit您的回答添加一些解释，包括您所做的假设。

【解决方案2】：

从 GlobalFilter 周围移除“ng-template”

【讨论】：

如果你能解释为什么你的答案可以解决问题，你的答案可能会更好。