PrimeNG - 按属性数组的索引元素过滤表答案

【问题标题】：PrimeNG - Filter table by indexed element of property arrayPrimeNG - 按属性数组的索引元素过滤表
【发布时间】：2022-01-18 17:50:39
【问题描述】：

我想根据我的模型属性的索引元素在PrimeNG 表中实现数据过滤。

JSON 格式的模型示例如下：

{
"customObj":{
  "id":1,
  "name":"my name",
  "labels":[
     {
        "id":1,
        "labelValue":"A random label"
     },
     {
        "id":2,
        "labelValue":"A random label 2"
     }
  ]
 }
}

考虑到上面的模型，我想通过customObj.labels[0].labelValue属性过滤表格。

在 PrimeNG 表中实现这一目标的最开箱即用的方式是什么？

到目前为止，我使用单个对象属性过滤columnFilter 组件，如下所示

<!-- example of filtering for the name property -->
<th>
  <p-columnFilter type="text" field="name"></p-columnFilter> 
</th>

我可以使用类似的东西吗？我已阅读 PrimeNG 文档，但没有找到任何示例。提前致谢

Angular 版本：12.2.3

PrimeNG 版本：12.1

【问题讨论】：

primefaces.org/primeng/v12-lts/#/table/filter

标签： datatable primeng primeng-datatable

【解决方案1】：

最简单的解决方案我终于发现按数组属性的索引元素过滤表格是使用<p-columnFilter，如下所示：

<!-- Filter customObj by 'labels[0].labelValue-->
<th>
 <p-columnFilter type="text" field="labels.0.labelValue"></p-columnFilter> 
</th>

如果索引是变量形式，而我们事先不知道，你也可以使用如下所示的变量：

<!-- Filter customObj by 'labels[index].labelValue-->
<th>
 <p-columnFilter type="text" field="labels.{{index}}.labelValue"></p-columnFilter> 
</th>

【讨论】：