Question

我从服务器获取一些数据。数据如下所示：

ABC / ABCA / abcsd / absc.dat

斜杠的数量与路径的路径不同。

现在我想使用PrimeNG在树视图中显示它。这就是我的目标：

.data(d3ExpectedFormat)

＆＃34;测试＆＃34;是前面描述的数据。我正在用正则表达式搜索/。＆＃34;导致[1]＆＃34;会给我斜杠之间的字符串。我现在能够做的是检查它是否是.dat然后将其推入树视图中，treeviewstructure就是这样的（例子来自上面）：

for (var i = 0; i < this.test.length; i++) {
                let regex = /([^\/]+)\/?/g;
                let result: RegExpExecArray;

                while ((result = regex.exec(this.test[i])) !== null) {
                    console.log(result[1]);
                    if (result[1].search(".dat")>0) {
                        let item = {
                            "label": result[1],
                            "data": "Documents Folder",
                            "icon": "fa-file-text-o"
                        }
                        this.tree.push(item)
                    }
                    else {
                        let item = {
                            "label": result[1],
                            "data": "Documents Folder",
                            "expandedIcon": "fa-folder-open",
                            "collapsedIcon": "fa-folder",
                            "children": [{
                            }]
                        }
                        this.tree.push(item)
                    }
                }
            }

如您所见，我无法显示正确的文件夹结构。我可以通过获取斜杠数量来对其进行硬编码，然后按照正确的顺序进行切换，但我想以动态的方式使用int。

所以我需要的是动态的：

-abc
-abca
-abcsd
-absc.dat

有什么想法吗？

Answer 1

您需要创建一个递归函数（如果有任何子项，则调用自身的函数），以便它可以像树一样遍历它。我只是写一个通用代码来给你一个想法。

    for (let role of roles) {
        if (role.parentID) continue;

        const roleNode = this.createTreeNodesFromEntities(role, (x: Role) => x.roles);

        this.roleNodes.push(roleNode);
    }


private createTreeNodesFromEntities<T extends { name: string }>(entity: T, getChildren: (x: T) => T[]): TreeNode {
    let result: TreeNode = {
        label: entity.name,
        data: entity,
        expanded: true,
        children: []
    }

    getChildren(entity).forEach((childPermission, index) => {
        let cPermissionNode = this.createTreeNodesFromEntities(childPermission, getChildren);
        result.children.push(cPermissionNode);
    })

    return result;
}

您还可以参考答案here。希望它有意义

Angular2 / PrimeNG - 以动态方式将项目推送到Treeview中

1 个答案: