動態菜單帶有角度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默認情況下不支持下拉子項，因此我將在此Codepen示例中使用語法

潛在解決方案

如果將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>