如何通过代码扩展 PrimeNg TreeTable答案

【问题标题】：How to expand PrimeNg TreeTable by code如何通过代码扩展 PrimeNg TreeTable
【发布时间】：2022-03-30 13:36:17
【问题描述】：

假设我有 PrimeNg 为 Angular2 提供的 TreeTable。如何在代码中展开特定节点（例如在onNodeSelect 回调中）？

【问题讨论】：

虽然与treetable无关，但可以作为灵感：stackoverflow.com/questions/38285593/…

【解决方案1】：

我猜 OP 不再需要答案，但任何到达这里却找不到答案的人 -

TreeNode 有一个属性expanded，您只需将其设置为true

selectedNode.expanded=true;

如果您希望树显示为全部展开，只需遍历 TreeNode 并在每个节点上设置展开即可。这将与此类似

  expandChildren(node:TreeNode){
    if(node.children){
      node.expanded=true;
      for(let cn of node.children){
        this.expandChildren(cn);
      }
    }
  }

【讨论】：

可以做同样的事情，但要选择它？
这个只改变图标不展开或折叠表格
@AhsanSohail 答案是多年前的，当时 Angular 版本是 1.2
@prajeeshkumar 所以.. 我如何在 2019 年扩展树节点？请您分享一个解决方案吗？
@vladimirkhozeyev 已经有一段时间没有在角度工作了，如果我这样做会更新

【解决方案2】：

使用上面我刚刚编写了用于扩展/折叠整个可处理节点的函数。

在我的模板中，我将整个 treetable json 传递给 exapandORcollapse

<button type="button" (click)="exapandORcollapse(basicTreeTable)">Collapse /Expand all</button>
 <p-treeTable [value]="basicTreeTable" selectionMode="single" [(selection)]="selectedPortfolio" (onNodeSelect)="nodeSelect($event)"
            (onNodeUnselect)="nodeUnselect($event)" (onRowDblclick)="onRowDblclick($event)" scrollable="true">

在我的 component.ts 文件中

 exapandORcollapse(nodes) {
    for(let node of nodes) 
  { 
    if (node.children) {
        if(node.expanded == true)
          node.expanded = false;
          else
          node.expanded = true;
        for (let cn of node.children) {
            this.exapandORcollapse(node.children);
        }
    }
  }
}

【讨论】：

在我的情况下完全不起作用，它不显示孩子，只有插入符号改变
它只展开到某些级别，没有深度展开或折叠。

【解决方案3】：

执行 prajeesh kumar 提到的代码后，要刷新树表，请添加以下代码行：

this.treeNodeData = [...this.treeNodeData];

您可以像这样调用 expandChildren() 方法：

  expandTreeNodes() {
    if (this.treeNodeData) {
      this.treeNodeData.forEach(x => this.expandChildren(x));

      // Below line is important as it would refresh the TreeTable data,
      // which would force automatic update of nodes and since expanded
      // has been set to true on the expandChildren() method.

      this.treeNodeData = [...this.treeNodeData ]; 
    }
  }

【讨论】：

【解决方案4】：

我也做了同样的事情，但是我将同一个树对象克隆到自己身上并且它起作用了。

this.treeData.forEach((node) => {this.expandRecursive(node, true);});
this.treeData = _.cloneDeep(this.treeData);

【讨论】：