Angular-tree-component 如何通过复选框选择捕获选定的节点答案

【问题标题】：Angular-tree-component how to capture selected nodes through checkbox selectionAngular-tree-component 如何通过复选框选择捕获选定的节点
【发布时间】：2018-10-11 01:33:44
【问题描述】：

我正在使用 angular-tree-component 生成带有复选框选项的树。 HTML

<tree-root [nodes]="nodes" [options]="options">
      </tree-root>

打字稿：

import { ITreeOptions } from 'angular-tree-component';
import { Component } from '@angular/core';

export class myComponent {
nodes = [
    {
      name: 'root1',
      children: [
        { name: 'root1_child1' },
        {
          name: 'root1_child2', children: [
            { name: 'grand_child1' },
            { name: 'grand_child2' }
          ]
        }
      ]
    },
    {
      name: 'root2',
      children: [
        { name: 'root2_child1' },
        {
          name: 'root2_child2', children: [
            { name: 'grand_child1' },
            { name: 'grand_child2' }
          ]
        }
      ]
    }
  ];

  options: ITreeOptions = {
    useCheckbox: true
  };

  optionsDisabled: ITreeOptions = {
    useCheckbox: true,
    useTriState: false
  };

所以我可以选择树节点（包括子节点），但找不到任何方法可以捕获所有选定（选中）节点并显示在另一个框上。

【问题讨论】：

标签： typescript treeview angular5 angular-components

【解决方案1】：

您可以使用“event.treeModel.selectedLeafNodeIds”来获取树中的选定节点，

例子：

<tree-root [nodes]="treeNode" (select)="onSelect($event)"
    (deselect)="onDeselect($event)" [options]="options"></tree-root>

this.selectedTreeList = Object.entries(event.treeModel.selectedLeafNodeIds)
     .filter(([key, value]) => {
            return (value === true);
      }).map((node) => node[0]);

【讨论】：

它有效，我也得到了一个数字数组而不是对象......类似于：[“2860399510223”、“3897698631848”、“9993577998256”、“5009898083230”、“3866878811722” , "1313097673070"] ....我怎样才能得到对象而不是这个？
@GeancarloMurillo 您可以删除最后一张地图((node) => node[0]);从上面的示例代码中，它将返回一个对象数组:)
是的，我用 getNodeById 和 selectedTreeList 解决了它:) ...谢谢
@GeancarloMurillo 您能告诉我您在 onSelect 事件中提到的内容以及如何获得该值吗？
@Dexter，我们可以通过两种方式获取树状列表的选中项，1）只有当前选中项，selectedItem: any； onSelect(event) { this.selectedItem = event.node.data; } 2) 一次获取所有选中的项目，同样在上面的例子中给出，this.selectedTreeList = Object.entries(event.treeModel.selectedLeafNodeIds) .filter(([key, value]) => { return value; });

【解决方案2】：

参考上面的答案来获取你可以使用的对象

  Object.entries(this.treeModel.selectedLeafNodeIds)
  .filter(([key, value]) => {
    return (value === true);
  })
  .map((id) => {
    let node = this.treeModel.getNodeById(id[0]);
    return node;
  });

【讨论】：

【解决方案3】：

您可以通过使用 (select) 和 (deselect) 事件来做到这一点。这是一个小例子。

onSelect(event) {
    try {

      let pushdata: any = [];
      pushdata.push(event.node.data);

      console.log(this.TreeViewData);
    } catch (e) {
      console.log(e.message)
    }
  }

与取消选择相同，即使您可以捕获取消选择的节点

ondeSelect(event) {
        try {

          let pushdata: any = [];
          pushdata.push(event.node.data);

          console.log(this.TreeViewData);
        } catch (e) {
          console.log(e.message)
        }
      }

Event.node.data 将返回您绑定的所有属性的数组列表。

【讨论】：