如何解决 globalFilter 不是 p-table 的属性答案

【问题标题】：How to solve globalFilter is not property of p-table如何解决 globalFilter 不是 p-table 的属性
【发布时间】：2019-02-06 09:35:52
【问题描述】：

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

无法绑定到“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';

【问题讨论】：

它是模块的一部分吗？
是的，它是模块的一部分

标签： angular primeng primeng-turbotable

【解决方案1】：

如果你想在惰性 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] 属性，您需要传递列名。

【讨论】：

感谢您的回复。这有效并节省了我的时间
你是如何解决的 -> $event.target.value TS2339：“EventTarget”类型上不存在属性“值”。
我做了完全相同的事情，但全局过滤器不适用于延迟加载。

【解决方案2】：

解决这个问题非常简单。不幸的是 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">
您需要在 p-treeTable 中定义 [globalFilterFields] 属性，该属性将您要执行搜索的列数组作为输入。

【讨论】：

【解决方案3】：

仔细查看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。我还添加了一个标题模板，其中包含您想要的全局过滤器的输入。

【讨论】：

和 globalFilterFields 数组 null 字段数组，作为字符串用于全局过滤。 “globalFilterFields”在文档部分。知道如何处理延迟加载
globalFilter != globalFilterFields : globalFilter 仅存在于已弃用的p-datatable。对于延迟加载过滤，请参阅此SO 帖子。