如何在Angular中创建嵌套的ngFor循环以动态更改对象子长度？

Question

我想在Angular应用中显示一个文件树。当然，文件树可以有多个级别的多个子项。

这是我的示例JSON对象：

"root": {
    "element": {
        "displayName": "testFolder",
        "path": "testFolder/",
        "parent": ""
    },
    "children": [{
        "element": {
            "displayName": "folder1",
            "path": "testFolder/folder1/",
            "parent": "testFolder/"
        },
        "children": []
    }, {
        "element": {
            "displayName": "sub_folder",
            "path": "testFolder/sub_folder/",
            "parent": "testFolder/"
        },
        "children": [{
            "element": {
                "displayName": "testDir3",
                "path": "testFolder/sub_folder/testDir3/",
                "parent": "testFolder/sub_folder/"
            },
            "children": []
        }]
    }]
}

children属性可以任意嵌套。我该怎么办呢？

Answer 1

就ngfor的嵌套而言，你可以使用这样的东西：

<template ngFor let-outer [ngForOf]="OuterArray" let-uterIndex="index">
         <template ngFor let-inner [ngForOf]="InnerArray" let-innerIndex="index">
         </template>
    </template>

并且为了遍历整个文件树，递归使用它。