Angular中如何将扁平数组转换为PrimeNG Tree树形数组

核心思路 #

利用名称映射表快速匹配父节点，遍历节点时将子节点挂载到对应父节点的children数组中，无父节点的直接作为根节点。

具体实现步骤 #

假设你已经有一个转换单个扁平元素为Tree节点的函数，示例如下：

// 将后端返回的扁平对象转为PrimeNG Tree节点
function convertToTreeNode(item: any) {
  return {
    label: item.name, // PrimeNG Tree需要的显示标签
    data: item, // 存储原数据
    children: [] // 初始化子节点数组
  };
}

接下来完成树形结构的组装：

1. 构建名称-节点映射表
   先把所有扁平元素转成节点并存入Map，实现O(1)时间复杂度的父节点查找：

const flatItems = [/* 你的后端返回扁平数组 */];
const nodeMap = new Map<string, any>();
const rootNodes: any[] = [];

// 第一步：转换所有节点并存入映射表
flatItems.forEach(item => {
  const node = convertToTreeNode(item);
  nodeMap.set(item.name, node);
});

2. 挂载子节点到对应父节点
   再次遍历所有扁平元素，根据previousName匹配父节点并完成挂载：

flatItems.forEach(item => {
  const currentNode = nodeMap.get(item.name);
  if (item.previousName) {
    const parentNode = nodeMap.get(item.previousName);
    // 确保父节点存在，避免异常
    if (parentNode) {
      parentNode.children.push(currentNode);
    } else {
      // 处理父节点不存在的场景，比如作为根节点或记录日志
      rootNodes.push(currentNode);
    }
  } else {
    // 无previousName的节点直接作为根节点
    rootNodes.push(currentNode);
  }
});

3. 最终结果
   rootNodes就是PrimeNG Tree组件所需的树形结构数组，直接绑定到组件的[value]属性即可使用。

注意事项 #

• 若后端返回的previousName可能为空字符串而非null，需调整判断条件为if (item.previousName && item.previousName.trim())。
• 需提前排查是否存在循环引用（如A的previousName指向B，B的previousName指向A），避免前端逻辑异常。
• 可根据需求修改label的取值（比如用item.displayName替代item.name）。

内容的提问来源于stack exchange，提问作者DWoonD