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