Question

我之前使用过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版本不是最新版本，但我的版本已更新。任何的想法？

Answer 1

将[pSortableColumnDisabled]="!col.sortable"添加到表标题标签：

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

Answer 2

从GlobalFilter周围删除“ ng-template”

PrimeNG v5.2.4 p-table全局过滤器无法正常工作

2 个答案: