在Typescript

时间:2017-09-01 00:36:26

标签: typescript primeng treenode

我有一个角色对象,我希望使用PrimeNG映射到TreeNode对象以在树中显示它。 角色对象是这样的(如图所示)

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

role object

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

{
"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);

    });

但是当我尝试角色时,这段代码似乎太复杂了。在'角色'映射到“孩子们”#39;在treeNode中。我见过一些像this这样的例子,但它映射的是相同的字段名称。

我是Typesript的新手,是否有一种解决方法可以将带有子项的角色对象转换为带有子项的treeNode,方法是指定要映射到' label'标签的字段名称(例如名称)。角色?

代码示例将受到高度赞赏。

1 个答案:

答案 0 :(得分:5)

好吧,我对您正在使用的RoleTreeNode类型不是100%肯定。根据您问题中的代码,我的猜测就在这里。

Role有一些你关心的属性,但棘手的是roles属性,我猜测它是一个Role个对象的数组:

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

同样,TreeNode有一些属性,但棘手的是children属性,它是TreeNode个对象的数组。此外,我假设TreeNodedata的类型中是通用的,在这种情况下,您想要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:行是函数的有效部分:您正在使用role.roles数组,并将每个Role元素映射到TreeNode<Role>,这就是roleToTreeNode()函数可以。也就是说,roleToTreeNode()是一个自我调用的递归函数。

这有意义吗?希望有所帮助。祝你好运!