Angular14+TypeScript构建嵌套对象实现Mat-Tree并更新节点

你当前的接口定义中，CellLeaderTree的child属性是必填的CellMemberTree类型，但创建对象时如果未先初始化child，直接设置child.childName就会报错——因为child初始值为undefined，无法直接设置其属性。

解决方式： #

方式1：创建对象时直接初始化完整嵌套结构

// 一次性创建带子节点的完整对象
const obj1: CellLeaderTree = {
  name: "Mike",
  child: {
    childName: "child1",
    hasChild: false
  }
};

// 分步创建对象
const obj2: CellLeaderTree = { name: "David", child: {} as CellMemberTree };
obj2.child.childName = "child2";
obj2.child.hasChild = true;

方式2：调整接口让child属性可选（允许父节点暂时无子节点）

export interface CellLeaderTree{
  name: string;
  child?: CellMemberTree; // 加?标记为可选属性
}
export interface CellMemberTree {
  childName: string;
  hasChild: boolean;
}

后续需要时再为child赋值：

const obj3: CellLeaderTree = { name: "Vic" };
obj3.child = { childName: "child3", hasChild: false };

要实现顶层、第一层子节点、第二层子节点的多层嵌套结构，同时适配Angular Mat-Tree的需求，需要设计递归式接口（每个节点可包含子节点数组），再通过循环生成对应结构。

步骤1：设计递归节点接口 #

export interface TreeNode {
  name: string;
  children?: TreeNode[]; // 子节点数组，支持无限层级嵌套
}

这个接口可以灵活扩展任意层级的节点，完全匹配Mat-Tree的数据格式要求。

步骤2：根据给定数组生成嵌套树结构 #

// 输入的各层级名称数组
const topLevelNames = ["Mike", "David","Vic"];
const firstLevelNames = ["child1", "child2", "child3"];
const secondLevelNames = ["grand-child1", "grand-child2"];

// 生成多层嵌套树的函数
const generateNestedTree = (): TreeNode[] => {
  // 生成第二层子节点
  const secondLevelNodes = secondLevelNames.map(name => ({ name }));
  
  // 生成第一层子节点，每个节点挂载第二层子节点
  const firstLevelNodes = firstLevelNames.map(name => ({
    name,
    children: [...secondLevelNodes]
  }));
  
  // 生成顶层节点，每个节点挂载第一层子节点
  return topLevelNames.map(name => ({
    name,
    children: [...firstLevelNodes]
  }));
};

// 调用函数生成树数据
const treeData = generateNestedTree();

步骤3：更新任意层级节点名称 #

通过遍历对应层级的节点即可批量修改名称：

// 修改顶层节点名称
const newTopNames = ["Mike Updated", "David Updated", "Vic Updated"];
treeData.forEach((node, index) => {
  node.name = newTopNames[index];
});

// 修改第一层子节点名称
const newFirstLevelNames = ["child1 Updated", "child2 Updated", "child3 Updated"];
treeData.forEach(topNode => {
  topNode.children?.forEach((childNode, index) => {
    childNode.name = newFirstLevelNames[index];
  });
});

// 修改第二层子节点名称
const newSecondLevelNames = ["grand-child1 Updated", "grand-child2 Updated"];
treeData.forEach(topNode => {
  topNode.children?.forEach(firstNode => {
    firstNode.children?.forEach((secondNode, index) => {
      secondNode.name = newSecondLevelNames[index];
    });
  });
});

内容的提问来源于stack exchange，提问作者정영훈