javascript - Angular ngfor循环显示菜单

我正在尝试创建菜单和子菜单。下面是我想要的菜单结构。这是我正在尝试的演示，但结构却不正确。

演示https://stackblitz.com/edit/angular-odvcsm。

"Sub Test": { // Main menu

 "Example1":"hai",//sub menu

 "Ex2":"hello"// sub menu

},

最佳答案

您需要在此处再进行一层迭代，以进入子菜单并删除顶层标签，因为这对您的情况没有用：

的HTML

<ul *ngFor="let partner of list_value | keyvalue let i=index">

    <li *ngFor="let innerData of partner.value | keyvalue">


        <ul class="submenu">
            <li *ngFor="let innerData1 of innerData.value | keyvalue">
                {{innerData1.key}}
                <ul class="submenu">
                    <li *ngFor="let item of innerData1.value | keyvalue">
            {{item.value}}
                    </li>
                </ul>
            </li>
        </ul>

    </li>
</ul>

demo