Html Bootstrap 4手风琴，用于角度4的导航

我想用Angular 4中的json对象创建嵌套菜单。我已经写了下面的代码

<div id="panel-group">
  <div class="panel panel-default" *ngFor="let mainItem of objectKeys(my_menu); let i = index">
    <div class="panel-heading" (click) = "current = i">
      <h5 class="panel-title">{{ mainItem }}</h5>
    </div>
     <div id="collapse1" class="panel-collapse" [class.collapse]='current != i'>
      <div class="panel-body">
        <ul>
          <li *ngFor="let subItem of my_menu[mainItem]"><a href="#">{{ subItem }}</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  current: number = 0;
  items: Array<any>;

  objectKeys = Object.keys;
   my_menu = {
    'Menu 1': ['Sub Menu 1', 'Sub Menu 2'],
    'Menu 2': ['Sub Menu 1', 'Sub Menu 2', 'Sub Menu 3'],
    'Menu 3': []
  };
}

{{mainItem}}



从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
名称='角度'；
电流：数字=0；
项目：数组。我现在的问题是如何检查菜单是否有子菜单以及如何添加路由器链接以及如何检查是否有子菜单。请帮助错误在行中

<div id="collapse1" class="panel-collapse" [class.collapse]='current != i'>



逻辑没有正确执行。但是，如果您删除条件检查
[class.collapse]='current！=i'
，这将解决您的问题。不需要其他任何东西。
只需根据我们的需要重新组织对象并执行即可

my_menu = [
    {menu:[{main:'Menu 1', submenu: [{sub:'Sub Menu 1', route:'/home1'}, {sub:'Sub Menu 2', route:'/home2'}]}]},
    {menu:[{main:'Menu 2', submenu: [{sub:'Sub Menu 1', route:'/about'}, {sub:'Sub Menu 2', route:'about1'}, {sub:'Sub Menu 3',route:'about2'}]}]},
    {menu:[{main:'Menu 3', submenu:[]}]}
  ];

请参阅。
您的逻辑几乎正确。但是您不应该使用空格作为属性名称-首选的符号是camelCase，将其设置为menu1、menu2、menu3。然后迭代可以轻松更正HI@Anoop请您帮助我。我在角度方面是新手，这就是为什么我面临的问题确保我将处理您提供的stackblitz链接，并继续ct you Soon Thank you Soon Thank:）这是我到目前为止尝试过的链接。更新的答案请检查。希望这是您期望的添加路由器链接请解释上下文。所有这些子菜单是路由到同一页还是不同页，没有给出参考