Angular中将Part数组转换为PrimeNG TreeTable所需TreeNode结构的实现方法

实现思路 #

• 利用递归处理无限嵌套的Part结构，每个Part实例单独转换为PrimeNG的TreeNode结构
• 递归终止条件自动触发：当Part的parts属性为空数组时，转换后的children也为空数组

代码实现 #

首先定义对应类型（如果项目中已引入PrimeNG模块可直接使用内置TreeNode类型）：

// 对应后端返回结构的Part接口
interface Part {
  id: number;
  name: string;
  parts: Part[];
}

// 临时TreeNode定义，已装PrimeNG可直接导入import {TreeNode} from 'primeng/api';
interface TreeNode {
  data?: any;
  children?: TreeNode[];
}

转换逻辑代码：

// 单个Part转TreeNode的递归函数
function partToTreeNode(part: Part): TreeNode {
  return {
    data: {
      id: part.id.toString(), // 按需求将数字id转为字符串
      // 如果你示例中的"Part A"前缀不需要，直接替换为name: part.name即可
      name: part.name.length === 1 ? `Part ${part.name}` : part.name
    },
    children: part.parts.map(subPart => partToTreeNode(subPart))
  };
}

// 批量转换Part数组为TreeNode数组，就是你需要的partsTree
const partsTree: TreeNode[] = parts.map(part => partToTreeNode(part));

补充说明 #

如果需要和你示例完全一致的外层包裹结构，可额外加一层封装：

const treeTableData = {
  data: partsTree
};

该方案支持任意深度的嵌套结构，只要后端返回的Part结构无循环引用就不会出现异常。

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