PrimeNG p-tree：如何根据来自 json 文件的布尔值从 ptree 中隐藏特定节点？

Question

我正在使用 primeng 树来显示 json 数据，如下所示：

<p-tree [value]='dataToDisplayFromConfig' selectionMode='checkbox' [(selection)]='selectedData'>

正在将 JSON 数据读入 dataToDisplayFromConfig。我想根据来自此 json:

的 visible 属性使某些节点不可见

[
    {
        "label": "f",
        "children": [
            {
                "label": "",
                "visible": true,
                "data": "f"
            },
            {
                "label": "s",
                "visible": false,
                "data": "s"
            }            
        ]
    }
]

我们如何实现它？

提前致谢。

Answer 1

TreeNode 界面没有隐藏或显示项目的选项，因此您必须创建一个函数来过滤子节点和 return 仅可见

我已更新界面以包含这样的可见选项

export interface NewTreeNode extends TreeNode {
  visible?: boolean;
  children?: NewTreeNode[];
}

getValidTreeNodeItems 方法将循环抛出节点和子节点并删除任何可见等于 false 的节点

  getValidTreeNodeItems(treeNodes: NewTreeNode[]): NewTreeNode[] {
    const validItems = treeNodes.filter(i => i.visible !== false);

    validItems.forEach(i => {
      if (i.children) {
        i.children = this.getValidTreeNodeItems(i.children);
      }
    });

    return validItem;
  }

demo

Answer 2

根据@malbarmavi 的回答，您可以使用 styleClass 属性在 TreeNode.

中隐藏某些节点

getTreeNode(treeNodes: any[]): TreeNode[] {
    return treeNodes.map(i => {
       i.styleClass = !!i.visible? '' : 'display-none';
       return i;
    }).map(i => {
        if (i.children) {
            i.children = this.getTreeNode(i.children);
        }
        return i;
    });

 }

并在 style.css 中添加以下 css,

.display-none {
    display: none
}

因此，即使隐藏了元素，您仍然可以拥有这些元素。

谢谢。

PrimeNG p-tree：如何根据来自 json 文件的布尔值从 ptree 中隐藏特定节点？

PrimeNG p-tree: How to hide certain node from ptree on basis of a boolean value coming from json file?

boost-propertytree

primeng

angular