带角度2的子菜单的动态菜单

Question

我有以下格式的JSON。当sub-menu_location不等于null时，我需要将其转换为带有子菜单的菜单，如下

{
  "data": [
    {
      "menu_name": "Primary Operations",
      "enabled": true,
      "sub-menu_location": null
    },
    {
      "menu_name": "Curated Games",
      "enabled": false,
      "sub-menu_location": null
    },
    {
      "menu_name": "Cricket",
      "enabled": false,
      "sub-menu_location": "outdoor"
    },
    {
      "menu_name": "football",
      "enabled": false,
      "sub-menu_location": "outdoor"
    },
    {
      "menu_name": "Hockey",
      "enabled": false,
      "sub-menu_location": "outdoor"
    }
  ]
}

Answer 1

有几点需要注意：

• 您在问题中提供的示例数据仅允许单个子菜单项。
• 我不知道你想如何显示这个，但是从我猜测Bootstrap的图片来看。
• 我不认为Bootstrap默认支持下拉子项，因此我将使用this codepen example中的语法

潜在解决方案

如果将data对象存储为组件中的属性，则以下模板应该为您提供一些内容：

<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>