在 PrimeNG Turbo 表中过滤复杂对象答案

【问题标题】：Filter Complex Objects in PrimeNG Turbo Table在 PrimeNG Turbo 表中过滤复杂对象
【发布时间】：2018-09-20 08:23:39
【问题描述】：

假设我有一张桌子，我正在提取一份客户列表。也许其中一个参数是包含城市、州、邮编等参数的地址对象。我可以很容易地使这些值中的任何一个出现在表中（例如 client.address.city），但是因为它们是地址对象的一部分，所以我我无法按这些值过滤或排序。

这是 Material 2 目前提供的用于扁平化数据的功能，让用户能够过滤/排序。

this.dataSource.filterPredicate = (client: Client, filter) => {
        let dataStr = client.step + client.name + client.interest.industry + client.interest.package + client.address.city + client.address.state + client.origin;
        return dataStr.toLowerCase().indexOf(filter) != -1; 
      }

如何使用primeng 的turbo table 实现这样的效果？

【问题讨论】：

标签： angular filter google-cloud-firestore primeng primeng-turbotable

【解决方案1】：

在即将到来的里程碑尝试解决 related custom filter feature request 之前，我认为类似于 Material 2 方法的自定义过滤器是不可能的。

您可以将原始表数据对象转换或扩展为您的表数据的 PrimeNG 特定对象表示，其中每个列定义是（或其他 col 定义）您想要的扁平化/连接/CSV（等）表示使用 PrimeNG DataTable/TurboTable filterMatchMode 类型进行过滤。

您可能不会显示实际的过滤器友好 col def 值。相反，您可以从 ng-templates 中的相关原始表数据对象值呈现您喜欢的内容，这些值会打开过滤器友好的列 def 字段名称。

我使用这种方法来过滤需要在一行的单个表格单元格中显示的多个值，例如单一产品的货币价格。我在表格中显示堆叠的 div，但允许过滤，就好像它们是 CSV 值列表一样。

            // This is actually PrimeNG DataTable but TurboTable approach is similar

            <ng-template *ngIf="col.field === 'csvPriceCurrencyCodes'" let-data="rowData" pTemplate="body">
                <div *ngFor="let price of data?.prices">
                    {{ price?.currency }}
                </div>
            </ng-template>

            <ng-template *ngIf="col.field === 'csvPriceAmounts'" let-data="rowData" pTemplate="body">
                <div *ngFor="let price of data?.prices">
                    {{ price?.price | delimitNumber:2 }}
                </div>
            </ng-template>

另一个示例是 col.field，其名称类似于 enabledProduct，我可以将其替换为两个 CSV 字符串之一，这些字符串表示人们可以在设置为 @ 的 PrimeNG 表过滤器输入中键入的一系列典型布尔值987654325@ contains 0,n,no,off,false,disabled 或 1,y,yes,on,true,enabled 但视觉上显示的只是启用项目的巨大复选标记图标。

（我通常使用文档中列出的 PrimeNG 'Dynamic Columns' 方法。）

【讨论】：

谢谢你！我最终做的是扁平化专门用于排序/过滤的数据，这就是诀窍。

【解决方案2】：

您可以使用primeng globalfilter轻松访问复杂对象这样：在 p 表上添加服装属性 [globalFilterFields] 并用列标题数组填充它 - 它接受点有多棒！！！所以你可以深入复杂的对象

<p-table [globalFilterFields]="['notes','price','carType.name','nameOfCustomer']" >

【讨论】：