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

Question

我正在尝试使用 Angular 5 中的 PrimeNG 树表。根据文档，它需要特定格式的数据。是否有推荐的方法将自定义数据转换为所需格式？现在我正在通过 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