ng-zorro Tree组件如何将NzTreeNodeOptions的key字段重命名为id

方案1（推荐，适用于ng-zorro v11及以上版本） #

ng-zorro Tree组件内置了nzTreeProps配置项，直接用来自定义字段映射即可，无需修改原有业务数据结构：

• 在组件模板的nz-tree标签上添加配置：

<nz-tree
  [nzData]="你的业务数据源"
  [nzTreeProps]="{
    key: 'id'
    // 其他需要重映射的字段也可以在这里加，比如标题字段默认是title，你如果是name就写 title: 'name'
  }"
></nz-tree>

配置完成后组件会自动读取节点的id字段作为默认的唯一key值，和原key字段的使用效果完全一致。

方案2（适用于所有版本，手动转换数据结构） #

如果你的ng-zorro版本较低不支持nzTreeProps，或者你是手动构造NzTreeNode实例的场景，可以手动做一层数据映射：

• 方式A：转换原数据添加key字段

// 递归处理所有层级的节点，把id赋值给key
const transformTreeData = (nodes: any[]) => {
  return nodes.map(node => ({
    ...node,
    key: node.id,
    children: node.children ? transformTreeData(node.children) : []
  }))
}

// 处理后的数据直接传给nzData即可
this.treeData = transformTreeData(你的原始业务数据)

• 方式B：手动构造NzTreeNode实例

import { NzTreeNode } from 'ng-zorro-antd/tree';

const buildTreeNodes = (nodes: any[]) => {
  return nodes.map(node => new NzTreeNode({
    key: node.id,
    title: node.你的标题字段,
    children: node.children ? buildTreeNodes(node.children) : []
  }))
}

this.treeNodes = buildTreeNodes(你的原始业务数据)

注意：如果你使用的是树选择组件nz-tree-select，配置逻辑完全相同，同样通过nzTreeProps配置字段映射即可。

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