Angular：ngFor 的遞歸調用

Question

我有一個 JSON 里面有一些嵌套的對象。 所以為了在視圖中顯示它們，我創建了這個：

<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 個嵌套對象及其鍵和值。 但是，如果最后一個 object 在它自己的 object 中還有 3 個嵌套對象怎么辦？ 有沒有一種方法可以動態地做到這一點，而無需硬編碼？ 我相信有更好的解決方案。 我真的很感激！

Answer 1

您可以通過創建遞歸組件來解決它。 例如https://netbasal.com/recursion-in-angular-components-1cd636269b12