javascript - 如何使用 angular2-tree 插件获取检查的树结构值

Question

在这里，我使用我的 json 和 angular2 - 树组件生成一个动态树结构，直到现在一切都很好，当我们选择必须选择特定名称的事件时，我无法生成选择事件广告objects if child is there 我尝试了这个 URL 并且在文档中我也没有找到任何获取所选值的方法所以请给我建议。

https://angular2-tree.readme.io/docs

下面是我的代码

options = {
  useCheckbox: true
};
nodes;
data = {
  "info": {
    "laptop": {
    },
    "config": {
      "properties": {
        "ram": {
        },
        "processor": {
        },
        "hdd": {

        }
      }
    },
    "link": {

    },
    "name": {

    },
    "company": {
      "properties": {
        "model": {

        },
        "maker": {
          "type": "integer"
        },
        "country": {
          "type": "text"
        },
        "enterprise": {

        }

      }
    }
  }
};

check(){
  const results = Object.keys(this.data.info).map(k => ({
    name: k,
    children: this.data.info[k].properties
      ? Object.keys(this.data.info[k].properties).map(kk => ({ name: kk }))
      : []
  }));

  this.nodes = results;
}

.html代码

<button type="button" (click)="check()">click</button>

<hr>

<input id="filter" #filter (keyup)="tree.treeModel.filterNodes(filter.value)" placeholder="filter nodes" />
<button (click)="tree.treeModel.clearFilter()">Clear Filter</button>
<tree-root #tree [focused]="true" [options]="options" [nodes]="nodes"></tree-root>

堆栈 Blitz 链接

https://stackblitz.com/edit/angular-kh28sg

Answer 1

不知道有没有更好的方法可以使用tree.treeModel.selectedLeafNodeIds访问选中的节点。您必须在检查是否被选中之前 查看docs/API

例如，如果你有一个按钮

 <!--I like pass as argument the property "treeModel" of #tree ("reference variable")-->
<button (click)="click(tree.treeModel)">sendData</button>
<tree-root #tree [focused]="true" [options]="options" [nodes]="nodes"></tree-root>

你的函数点击可以像

click(tree:TreeModel)
{
  console.log(tree.activeNodes);
    Object.keys(tree.selectedLeafNodeIds).forEach(x=>{
      let node:TreeNode=tree.getNodeById(x);
      if (node.isSelected)
      {
         console.log("Selected:",node.data.name,
                     "Parent:",node.parent.data.name);
      }
  }) 
}

注意:我 fork 了your stackblitz

已更新使用响应创建一个对象

click(tree: TreeModel) {
    console.log(tree.activeNodes);
    let result: any = {} //<--declare a variable
    Object.keys(tree.selectedLeafNodeIds).forEach(x => {
      let node: TreeNode = tree.getNodeById(x);
      if (node.isSelected) {
        console.log("Selected:", node.data.name,
          "Parent:", node.parent.data.name);
        if (node.parent.data.name) //if the node has parent
        {
          if (!result[node.parent.data.name]) //If the parent is not in the object
            result[node.parent.data.name] = {} //create

          result[node.parent.data.name][node.data.name] = true;
        }
        else {
          if (!result[node.data.name]) //If the node is not in the object
            result[node.data.name] = {} //create
        }
      }
    })
    console.log(result);
  }