在 PrimeNG Turbo 中过滤复杂对象 Table

Question

假设我有一个 table 并且我正在拉入一个客户列表。也许其中一个参数是一个地址对象，其中包含城市、州、邮编等参数。我可以轻松地使这些值中的任何一个出现在 table（例如 client.address.city）中，但因为它们是我无法按这些值过滤或排序的地址对象。

这就是目前 Material 2 提供的用于拉平数据的功能，让用户能够 filter/sort。

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？

Answer 1

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

您可以将原始 table 数据对象转换或扩展为 table 数据的 PrimeNG 特定对象表示，其中每个列定义（或其他列定义）是 flattened/concatenated/CSV（等）要使用 PrimeNG DataTable/TurboTable filterMatchMode 类型过滤的表示形式。

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

我使用这种方法来过滤需要在单个 table 单元格中显示的多个值，例如单一产品的货币价格。我在 table 中显示堆叠的 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 中键入的一系列典型布尔值 table 过滤器输入设置为 filterMatchMode contains 0,n,no,off,false,disabled 或 1,y,yes,on,true,enabled 但视觉上显示的只是已启用项目的巨大复选标记图标。

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

Answer 2

您可以使用 primeng globalfilter 轻松访问复杂的 object 这样：添加 p-table 服装属性 [globalFilterFields] 并用列数组 header 填充它 - 它接受点真是太棒了！！！这样你就可以深入复杂的内部 object

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

在 PrimeNG Turbo 中过滤复杂对象 Table

Filter Complex Objects in PrimeNG Turbo Table

filter

primeng

angular

google-cloud-firestore

primeng-turbotable