如何在Angular中实现具有动态级别的JavaScript [关闭]

jv2fixgn  于 2023-09-29  发布在  Java
关注(0)|答案(1)|浏览(94)

已关闭,此问题需要details or clarity。它目前不接受回答。
**想改善这个问题吗?**通过editing this post添加详细信息并澄清问题。

8小时前关闭
Improve this question
我有一个数据结构像这样:

var menu_data=[
    {'name':'A', 'next':[{'name':'AA', 
                          'next':[{'name':'AAA', 
                                   'next': []}]}] },
    {'name':'B', 'next':[{'name':'BA', 'next':[]},
                         {'name':'BB', 'next':[]}
                        ]
    }
]

因此,下拉列表具有以下级别:

A->AA->AAA;

B->BA

 ->BB

下拉菜单(menu)的设置完全由menu_data驱动,因此级别不是预先确定的。如何实施?

olmpazwi

olmpazwi1#

你可以添加一个下拉组件,当有下一个项目时,它会调用自己。

<!-- dropdown.component.html -->
<ul>
  <li *ngFor="let item of menuData">
    {{ item.name }}
    <app-dropdown *ngIf="item.next.length > 0" [menuData]="item.next"></app-dropdown>
  </li>
</ul>

从appComponent传递数据

<!-- app.component.html -->
<app-dropdown [menuData]="menu_data"></app-dropdown>

相关问题