Angular:ngFor 的递归调用

Question

我有一个 JSON，其中包含一些嵌套对象。因此，为了将它们显示在 View 中，我创建了以下内容:

<div *ngFor="let item of trees">
    <div *ngFor="let obj of item | keyvalue">
        <div *ngFor="let obj1 of obj.value | keyvalue">
            <div *ngIf="!ifLeaf(obj1.value)">
                <b>{{ obj1.key }}</b>
                <div *ngFor="let obj2 of obj1.value | keyvalue">
                    <div *ngIf="ifLeaf(obj2.value)">
                        <i>{{ obj2.key }}</i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JSON 看起来像这样:

trees[
        header: {
            first: {
                title: {
                    name: "Test"
                }
            },
            second: {
                title: {
                    top: {
                        name: "Test"
                    }
                },
                desc: {
                    name: "Test"
                }
            }
        }
    ]

该代码最多可以显示 2 个嵌套对象及其键和值。但是如果最后一个对象在其自己的对象中还有 3 个嵌套对象怎么办？有没有一种方法可以动态地做到这一点，而无需硬编码？我确信对此有更好的解决方案。我真的很感激!

Answer 1

您可以通过创建递归组件来解决它。例如https://netbasal.com/recursion-in-angular-components-1cd636269b12