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

Question

我正在使用 Angular-Tree-Component 生成带有复选框选项的树。超文本标记语言

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

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

Answer 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]);