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"
    }
  ]
}

- Vivin Prasannaa

---

请在下面的文本框中输入代码。 - Vivin Prasannaa

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>

- 0mpurdy