地图对象到另一个打字稿

Question

我有，我想用PrimeNG在树上，以显示它映射到一个TreeNode对象的角色对象。 角色对象是这样的（图中所示为好）

role: [ 
id: .... 
name: .... 
    description: .... 
    roles[]: ..... 
] 

树节点对象具有以下结构：

{ 
"data": 
[ 
    { 
     "label": "Documents", 
     "data": "Documents Folder", 
     "expandedIcon": "fa-folder-open", 
     "collapsedIcon": "fa-folder", 
     "children": [{ 
       "label": "Work", 
       "data": "Work Folder", 
       "expandedIcon": "fa-folder-open", 
       "collapsedIcon": "fa-folder", 
       "children": [{"label": "Expenses.doc", "icon": "fa-file-word-o", "data": "Expenses Document"}, {"label": "Resume.doc", "icon": "fa-file-word-o", "data": "Resume Document"}] 
      }, 
      { 
       "label": "Home", 
       "data": "Home Folder", 
       "expandedIcon": "fa-folder-open", 
       "collapsedIcon": "fa-folder", 
       "children": [{"label": "Invoices.txt", "icon": "fa-file-word-o", "data": "Invoices for this month"}] 
      }] 
    }, 
    { 
     "label": "Pictures", 
     "data": "Pictures Folder", 
     "expandedIcon": "fa-folder-open", 
     "collapsedIcon": "fa-folder", 
     "children": [ 
      {"label": "barcelona.jpg", "icon": "fa-file-image-o", "data": "Barcelona Photo"}, 
      {"label": "logo.jpg", "icon": "fa-file-image-o", "data": "PrimeFaces Logo"}, 
      {"label": "primeui.png", "icon": "fa-file-image-o", "data": "PrimeUI Logo"}] 
    }, 
    { 
     "label": "Movies", 
     "data": "Movies Folder", 
     "expandedIcon": "fa-folder-open", 
     "collapsedIcon": "fa-folder", 
     "children": [{ 
       "label": "Al Pacino", 
       "data": "Pacino Movies", 
       "children": [{"label": "Scarface", "icon": "fa-file-video-o", "data": "Scarface Movie"}, {"label": "Serpico", "icon": "fa-file-video-o", "data": "Serpico Movie"}] 
      }, 
      { 
       "label": "Robert De Niro", 
       "data": "De Niro Movies", 
       "children": [{"label": "Goodfellas", "icon": "fa-file-video-o", "data": "Goodfellas Movie"}, {"label": "Untouchables", "icon": "fa-file-video-o", "data": "Untouchables Movie"}] 
      }] 
    } 
] 

}

data.roles.forEach((role, index) => { 
     //this.roleTree.label = role.Name; 
     //this.roleTree.data = role.ID; 

     let treeNode: TreeNode = { 
      label: role.Name, 
      data: role 

     } 

     this.treeNodes.push(treeNode); 
     console.log(role); 
     console.log(index); 

    }); 

但是这个代码似乎太复杂了，当我t r'角色'映射到treeNode中的'children'。我看过一些例子，如this，但它映射的是相同的字段名称。

我是新来Typesript，有一种解决方法，通过指定我字段名（例如名称）映射到角色的“标签”来转换我的角色，角色对象与孩子们树节点？

A码例如将高度赞赏。

Answer 1

嘛，我不是100％肯定你正在使用的Role和TreeNode类型。这是基于你的问题中的代码的猜测。

Role有你所关心的一些属性，但棘手的是roles属性，我猜测，就是要Role对象的数组：

interface Role { 
    id: string; 
    name: string; 
    description: string; 
    roles: Role[]; 
} 

同样，TreeNode有一些属性，但棘手的是children属性，它是一个TreeNode对象的数组。另外，我假设TreeNode是在data类型通用的，在这种情况下，你想要做的TreeNode<Role>，这意味着data财产将是一个Role对象：

interface TreeNode<T> { 
    label: string; 
    data: T; 
    expandedIcon?: string; 
    collapsedIcon?: string; 
    children: TreeNode<T>[]; 
} 

如果这些都是正确的，那么你可以使用下面的roleToTreeNode()功能的Role对象映射到TreeNode<Role>对象：

function roleToTreeNode(role: Role): TreeNode<Role> { 
    return { 
    label: role.name, 
    data: role, 
    children: role.roles.map(roleToTreeNode) 
    }; 
} 

的children:行手术面值函数T：你正在服用的role.roles阵列，并且每个Role元素映射到一个TreeNode<Role>，这是roleToTreeNode()函数做什么。也就是说，roleToTreeNode()是一个自我调用的递归函数。

这是否有意义？希望有所帮助。祝你好运！