1

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

abc/abca/abcsd/absc.dat

斜线的数量因路径而异。

现在我想使用 PrimeNG 在树视图中显示它。这是我有多远：

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)
                    }
                }
            }

“测试”是前面描述的数据。我正在使用正则表达式搜索 /。"result[1]" 会给我斜线之间的字符串。我现在能做的是检查它是否为.dat，然后将其推送到树视图中，树视图结构如下所示（上面的示例）：

-abc
-abca
-abcsd
-absc.dat

如您所见，我无法显示正确的文件夹结构。我可以通过获取斜杠的数量对其进行硬编码，然后执行一个 switch case 以正确的顺序推送它，但我想要 int 以一种动态的方式。

所以我需要的是动态的方式：

for 3 slashes:
   first item: this.items.push(item)
   sec. item : this.items[0].children.push(item)
   third. item: this.items[0].children[0].children.push(item)

for x slashes:
   ???

有任何想法吗？

4

1 回答 1

0

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

    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;
}

你也可以参考这里的答案。希望这是有道理的

于 2017-09-13T08:17:03.107 回答