我正在使用primeng树来显示这样的json数据:

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

JSON 数据正在读入dataToDisplayFromConfig 我想根据来自此 json 的可见属性使某些节点不可见

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

我们怎样才能实现它?

提前致谢。

#1楼 票数:2

根据@malbarmavi 的回答,您可以使用TreeNode 中的styleClass属性隐藏某些节点。

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
}

因此,即使在隐藏元素之后,您仍然可以拥有这些元素。

谢谢。

#2楼 票数:1 已采纳

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

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

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;
  }

演示🚀

  ask by Anamika Yadav translate from so

未解决问题?本站智能推荐:

2回复

无法在PrimeNGTreenode组件中显示数据

我正在尝试在angular 5项目中以Treenode格式显示数据。 我从服务中获取以下形式的数据(对象形式): 我有如下的HTML: 文件类型如下 我收到如下错误: 错误: 找不到其他支持对象“ [object Object]” 请您帮助我将对象转换为Treenod
1回复

PrimeNg(7.x)p-下拉布尔值

我想要一个包含两个选项的p 下拉列表。 但是项目不会根据控制布尔值被选择。 控件 (NOTIF_ALL) 接收一个布尔值
1回复

如何知道数据何时加载到p-tree并选择第一个节点?

我试图选择 Angular PrimeNG 树组件的第一个节点,但我唯一能做的就是选择根节点,但这不会触发它的点击事件。 我试图找到一种方法,当数据已加载到组件上时,如何在第一个节点上触发单击事件。 tree 填充了通过服务中的承诺从端点获取的 JSON 数据,例如https://www.prim
1回复

如何设置p-tree的宽度以填充可用空间?

我无法正确设置宽度以填充p-tree primeng 控件的可用空间。 当我手动执行它时,它在 chrome devtools 中工作,但当我在我的组件的样式文件中执行它时却不起作用。 Stackblitz 链接: https://stackblitz.com/edit/angular6-pri
3回复

PrimeNGp-tree错误:无法绑定到“value”,因为它不是“p-tree”的已知属性

我在我的 Angular2 webapp 中使用 PrimeNG,我想使用 p-tree 组件。 我在 app.module 中导入了 TreeModule: 我的组件是: 最后在 html 中: 错误是: 我发现了类似的线程,但找不到好的解决方案。 你能帮助我吗? 很感谢。 解决了我解决了在正确的
1回复

Primeng表中自定义过滤布尔值的问题

我正在使用 primeng Table 在我的 Angular 应用程序中显示数据,我现在遇到的问题是我必须使用过滤器但有条件,例如,如果用户键入 0、1 或 2,我必须基于此显示数据,我正在尝试的是这个 如果用户输入 0 其过滤很好,但问题是当他输入 1 或 2 时,因为我必须从 2 个字段中进行
1回复

PrimeNgAngular9我正在使用p-tree自定义api,但它不起作用

我正在尝试使用自定义 api 填充 p-tree [value],我该如何使用模板进行填充。 这是api
2回复

在primeng中对p评级的不同颜色

我正在尝试为星星着色并且在 .html 中有多个p-rating ,并尝试将不同的颜色应用于同一组件中的不同p-rating 。 如何使用 Primeng 或 Angular 方式为星星设计样式。 .html .css