Question

我正在尝试在角度5中使用PrimeNG treetable。根据文档，它需要特定格式的数据。是否有推荐的方法来转换所需格式的自定义数据？现在我通过以下格式的http get服务获取json数组，其中relatedkey指定数据的子节点。所以需要迭代json数组来获取带有相关键数组中提到的键的子节点。或者应该是服务器谁应该以所需的格式发送数据？

输入json ---编辑：不是EXCAT数据，但是如下所示 -

[
    {key:key1, name: "A", features:{"f1":"CFB","f2":"CDB"}, relatedkey:[key2,key4}], Parent :true },
    {key:key2,name:"B", features:{"f1":"dsn","f2":"dsdfd"},relatedkey:[key3], Parent :false },
    {key:key3, name: "C", features:{"f1":"nn","f2":"bbb"},relatedkey:[], Parent :false},
     {key:key4,name: "D",features:{"f1":"Cn","f2":"nn"}, relatedkey:[], Parent :false}
 ]

预期的json

     {
 "data":
 [  
    {  
        "data":{  
            "name":"Documents",
            "size":"75kb",
            "type":"Folder"
        },
        "children":[
            {  
                "data":{  
                    "name":"Work",
                    "size":"55kb",
                    "type":"Folder"
                },
                "children":[  
                    {  
                        "data":{  
                            "name":"Expenses.doc",
                            "size":"30kb",
                            "type":"Document"
                        }
                    },
                    {  
                        "data":{  
                            "name":"Resume.doc",
                            "size":"25kb",
                            "type":"Resume"
                        }
                    }
                ]
            },
            {  
                "data":{  
                    "name":"Home",
                    "size":"20kb",
                    "type":"Folder"
                },
                "children":[  
                    {  
                        "data":{  
                            "name":"Invoices",
                            "size":"20kb",
                            "type":"Text"
                        }
                    }
                ]
            }
        ]
    },
    {  
        "data":{  
            "name":"Pictures",
            "size":"150kb",
            "type":"Folder"
        },
        "children":[  
            {  
                "data":{  
                    "name":"barcelona.jpg",
                    "size":"90kb",
                    "type":"Picture"
                }
            },
            {  
                "data":{  
                    "name":"primeui.png",
                    "size":"30kb",
                    "type":"Picture"
                }
            },
            {  
                "data":{  
                    "name":"optimus.jpg",
                    "size":"30kb",
                    "type":"Picture"
                }
            }
        ]
    }
]
}

Answer 1

使用TreeTable时，我曾经从服务器端发送以下内容。

public class SummaryObj {
 private boolean leaf;
 private boolean expanded;
 private TreeNodeData data;
 private List<SummaryObj> children;
}
public class TreeNodeData {
  private String name;
}

此处SummaryObj会自动映射到前端所需的类型。

Answer 2

您无需手动转换数据，只需根据您的要求自定义treenode.d.ts文件，就像我按照以下方式进行操作一样

export interface TreeNode {
label?: string;
data?: any;
icon?: any;
expandedIcon?: any;
collapsedIcon?: any;
children?: TreeNode[];
leaf?: boolean;
expanded?: boolean;
type?: string;
parent?: TreeNode;
partialSelected?: boolean;
styleClass?: string;
draggable?: boolean;
droppable?: boolean;
selectable?: boolean;
level?: any;
ParentOrganizationHierarchyGUID?:any;}

我想要一个额外的属性，所以在treenode.d.ts文件中添加了ParentOrganizationHierarchyGUID字段 路径：node_modules \ primeng \ components \ common

如何为角度5创建PrimeNG TreeTable的数据模型？

2 个答案: