关于打字稿：Angular-tree-component如何通过复选框选择捕获选定的节点


Angular-tree-component how to capture selected nodes through checkbox selection

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

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

打字稿：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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
  };

因此，我能够选择树节点(包括子节点)，但无法找到任何方式来捕获所有选定的(选中的)节点并显示在另一个框中。enter image description here

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

例：

1
2
3
4
5
6
7
<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]);
相关讨论

参考上面的答案以获得可以使用的对象

1
2
3
4
5
6
7
8
  Object.entries(this.treeModel.selectedLeafNodeIds)
  .filter(([key, value]) => {
    return (value === true);
  })
  .map((id) => {
    let node = this.treeModel.getNodeById(id[0]);
    return node;
  });

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

1
2
3
4
5
6
7
8
9
10
11
onSelect(event) {
    try {

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

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

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

1
2
3
4
5
6
7
8
9
10
11
ondeSelect(event) {
        try {

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

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

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