【问题标题】:primeng v11.2.0: p-columnFilter not showingprimeng v11.2.0:p-columnFilter 未显示
【发布时间】:2022-01-27 22:26:43
【问题描述】:

亲爱的,我正在使用 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>

我错过了什么?

【问题讨论】:

    标签: primeng p-table


    【解决方案1】:

    我发现primeng V13与最新版本的angular cli不兼容。降级后:

    "primeflex": "^3.0.0",
    "primeicons": "^4.1.0",
    "primeng": "^12.2.2",
    

    过滤器按钮有效

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2022-07-27
      • 2021-01-25
      • 2021-05-01
      • 2018-05-10
      • 2021-09-17
      • 2018-08-28
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多