Question

运行应用程序时，我会遇到

错误

无法绑定到“ globalFilter”，因为它不是“ p-table”的已知属性。 1.如果“ p-table”是一个Angular组件，并且具有“ globalFilter”输入，则请验证它是否是此模块的一部分。

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

如果要在惰性p表中添加过滤器，请执行以下操作。

     <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 2

更好地了解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 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"是您的p-treeTable的标识符，如第2点所述。
<p-treeTable #tt [value]="testData" [scrollable]="true" scrollHeight="400px" scrollWidth="300px" [globalFilterFields]="['label','dataId']"> <ng-template pTemplate="caption">
您需要在[globalFilterFields]内定义p-treeTable属性，该属性将要在其上执行搜索的一列列作为输入。

如何解决globalFilter不是p表的属性

3 个答案: