地圖對象到另一個打字稿

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()是一個自我調用的遞歸函數。

這是否有意義？希望有所幫助。祝你好運！