亲爱的,我正在使用 primeNG 库中的 p-table 组件:
主过滤器(突出显示的输入框)正在工作,但是当我单击“示例”旁边的漏斗时,没有任何反应,控制台中也没有显示错误。我期待类似于以下内容:
这是我的代码:
<p-table #dt1 id="graphData" [value]="graphData" dataKey="sample" [rows]="6" [showCurrentPageReport]="true" [rowsPerPageOptions]="[6,10,25,50]" [loading]="loading" styleClass="p-datatable-gridlines" [paginator]="true" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
[globalFilterFields]="['sample','tyre_pressure','speed','power']">
<ng-template pTemplate="caption">
<div class="flex">
<button pButton label="Clear" class="p-button-outlined" icon="pi pi-filter-slash" (click)="clear(dt1)"></button>
<span class="p-input-icon-left ml-auto">
<i class="pi pi-search"></i>
<input #filterName pInputText type="text"
(input)="dt1.filterGlobal($event.target.value, 'contains')"
placeholder="Search keyword" />
</span>
</div>
</ng-template>
<ng-template pTemplate="header">
<tr>
<th>
<div class="flex justify-content-center align-items-center">
Sample
<p-columnFilter type="text" field="graphData.sample" display="menu">
</p-columnFilter>
</div>
</th>
<th>
<div class="flex justify-content-center align-items-center">
Tyre Pressure
<p-columnFilter type="number" field="tyre_pressure" display="menu">
</p-columnFilter>
</div>
</th>
当我按下漏斗按钮时,p-columFilter 中的文本过滤器未显示:
<th>
<div class="flex justify-content-center align-items-center">
Sample
<p-columnFilter type="text" field="graphData.sample" display="menu">
</p-columnFilter>
</div>
</th>
我错过了什么?