动态菜单与角度 2 中的子菜单

【问题标题】：Dynamic Menu with Sub menu in angular 2动态菜单与角度 2 中的子菜单
【发布时间】：2017-12-27 19:48:05
【问题描述】：

我有一些以下格式的 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"
    }
  ]
}

【问题讨论】：

ibb.co/kdcwjkimg 预览

标签： javascript html css angular

【解决方案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>

【讨论】：