在 Angular 中将树展平为数组

如何解决在 Angular 中将树展平为数组

我在 Angular 中使用以下算法从具有 id 和 parentId 之类的属性的数组创建了一棵树：

  public setTree(_searchResponses):void{
    let treeSearchResponses: Tree[] = [];
    _searchResponses.map((searchResponse) => {
      let treeNode:Tree = new Tree();
      treeNode.id = searchResponse.codElemento;
      treeNode.parentId = searchResponse.codElementoPadre;
      treeNode.name = searchResponse.codElemento;
      treeNode.isExpanded = true;
      this.nodeCounter++;
      treeSearchResponses.push(treeNode)
    });

    const nest = (items,id = null,link = 'parentId') =>
      items
        .filter(item => item[link] === id)
        .map(item => ({ ...item,children: nest(items,item.id) }));

    this.treeNodes =  nest(treeSearchResponses);
  }

这样做之后，我使用了一个角度库来可视化树并使用拖放修改它（例如我可以添加或删除一些元素，或者移动元素等），所以树结构（树节点）可以改变.

这样做之后，我应该能够重新创建一个像我用来生成树的数组一样的数组，以便保存它。

我尝试使用 foreach 或 while，但我无法在树结构中迭代，为了访问每个节点，我如何生成“反向算法”来做到这一点？

解决方法

树是一种可以通过递归函数轻松遍历的结构。迭代器也是一个 js 特性，它允许在遍历任何东西时轻松发出项目：

function* treeItems(node: Tree,parentId: string) {
  yield {codElemento: node.id,codElementoPadre: parentId};
  for(let child of node.children) yield* treeItems(child,node.id);
}

// usage
const flatArray = [...treeItems(this.treeNodes)];

,

由您的代码形成的树的反向算法。

this.searchResponse = [];
function setSearchResponse(treeNode) {
    if (treeNode == null || treeNode == undefined) {
        return;
    }
    treeNode.forEach(node=>{
        this.searchResponse.push({
            codElemento: node.id,codElementoPadre: node.parentId
        })

        if (node.children !== null || node.children !== undefined)
            setSearchResponse(node.children);
    }
    )
}