P-дерево PrimeNG: Как скрыть определенный узел от дерева на основе логического значения, полученного из файла json?

Question

Я использую дерево базовых элементов для отображения json данных, таких как:

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

Данные JSON считываются в dataToDisplayFromConfig . Я хочу сделать определенные узлы невидимыми на основе свойства visible , которое исходит из этого json:

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

как мы можем этого достичь?

Спасибо, в авансовый.

Answer 1

TreeNode интерфейс не имеет параметров, чтобы скрыть или показать элемент, поэтому вам нужно создать функцию, которая фильтрует дочерние узлы и возвращает только видимые

Я обновил интерфейс для включения видимой опции, например этот

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

getValidTreeNodeItems метод будет l oop бросать узел и подчиненный узел и удалять любой узел с видимым равным ложным

  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 ?