如何解决globalFilter is not 属性 of p-table

Question

当我运行应用程序时，我遇到错误

Can't bind to 'globalFilter' since it isn't a known property of 'p-table'. 1. If 'p-table' is an Angular component and it has 'globalFilter' input, then verify that it is part of this module.

HTML:

<p-table [columns]="tableHeaders" [value]="listEmrAllergy" [paginator]="true" [rows]="10" (onLazyLoad)="loadLazy($event)" [totalRecords]="totalcount" [lazy]="!press" [globalFilter]="dt">

TS:

import { TableModule } from 'primeng/table';

Answer 1

仔细查看 doc，您会发现没有 globalFilter 属性.

你应该用类似的东西替换你的代码：

<p-table #dt [columns]="tableHeaders" [value]="listEmrAllergy" [paginator]="true" [rows]="10" (onLazyLoad)="loadLazy($event)"
 [totalRecords]="totalcount" [lazy]="!press">
    <ng-template pTemplate="caption">
        <div style="text-align: right">
            <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>
</p-table>

我删除了 [globalFilter]="dt" 并添加了 #dt。我还添加了一个标题模板，其中包含您想要的全局过滤器的输入。

Answer 2

如果你想在 lazy p-table 中添加过滤器，做这样的事情。

     <p-table [columns]="tableHeaders" [value]="listEmrAllergy" [paginator]="true"
         [rows]="10" (onLazyLoad)="loadLazy($event)" [totalRecords]="totalcount" [lazy]="!press" 
[globalFilterFields]="tableHeaders" #tt>
                 <input type="text" pInputText placeholder="Global Filter" (input)="tt.filterGlobal($event.target.value, 'contains')" >
     </p-table>

对于 [globalFilterFields] 属性，您需要传递列名称。

Answer 3

解决这个问题非常简单。不幸的是，PrimeNg 没有很好的文档。你需要做三件事：

在您的 <input> 元素中，添加以下内容：

<input type="text" pInputText placeholder="Enter Filter Text" id="filterText" (input)="tt.filterGlobal($event.target.value, 'equals')" style="width:auto"> (input) 部分是重要的部分，其中 "tt" 是第 2 点中所写的 p-treeTable 的标识符。
<p-treeTable #tt [value]="testData" [scrollable]="true" scrollHeight="400px" scrollWidth="300px" [globalFilterFields]="['label','dataId']"> <ng-template pTemplate="caption">
您需要在 p-treeTable 中定义 [globalFilterFields] 属性，它将要执行搜索的列数组作为输入。

如何解决globalFilter is not 属性 of p-table

How to solve globalFilter is not property of p-table

primeng

angular

primeng-turbotable