Javascript 在angular 2中带有子菜单的动态菜单

我有一些JSON格式如下。当

sub-menu\u location

不等于null时，我需要将其转换为带有子菜单的菜单，如下所示

{
“数据”：[
{
“菜单名称”：“主要操作”，
“启用”：正确，
“子菜单位置”：空
},
{
“菜单名称”：“策划的游戏”，
“启用”：false，
“子菜单位置”：空
},
{
“菜单名”：“蟋蟀”，
“启用”：false，
“子菜单位置”：“室外”
},
{
“菜单名称”：“足球”，
“启用”：false，
“子菜单位置”：“室外”
},
{
“菜单名称”：“曲棍球”，
“启用”：false，
“子菜单位置”：“室外”
}
]
}

需要注意的几件事：

• 您在问题中给出的示例数据只允许一个子菜单项
• 我不知道你想如何显示这一点，但从图片上我猜是引导
• 我认为引导默认情况下不支持下拉子项，所以我将使用中的语法

势解 如果将

数据

对象作为属性存储在组件中，则以下模板应为您提供一些开始：

<li>
  <a class="dropdown-toggle" data-toggle="dropdown">Menu<b class="caret"></b></a>
  <ul class="dropdown-menu multi-level">
    <li *ngFor="let menuItem of data" class="dropdown-submenu">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{menuItem.menu_name}}</a>
      <ul *ngIf="menuItem.sub-menu_location" class="dropdown-menu">
        <li><a href="#">{{menuItem.sub-menu_location}}</a></li>
      </ul>
    </li>
  </ul>
</li>

img预览