PrimeNG - 按 属性 数组的索引元素过滤 table

Question

我想根据indexed元素在PrimeNGtable中实现数据过滤 属性 我的模型。

以下 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 属性.

过滤 table

在 PrimeNG table 中，最开箱即用的方式 是什么？

到目前为止，我使用单个对象属性过滤 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

Answer 1

最简单的解决方案 我终于找到了过滤 table by 索引元素的数组 属性 是使用 <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>