代码之家 › 专栏 › 技术社区 › vedankita kumbhar

四角导航手风琴

angular2-routing angular5 bootstrap-4 angular html

vedankita kumbhar · 技术社区 · 7 年前

我想用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': []
  };
}

这是我的工作示例 My example . 我现在的问题是如何检查菜单是否有子菜单,如何添加路由器链接,如何检查是否有子菜单。请帮忙

2 回复 | 直到 7 年前

Manikandan Velayutham 7 年前

只需根据我们的需要重新组织对象并执行。

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:[]}]}
  ];

参考 DEMO .

Anoop Surendran 7 年前

错误就在这一行

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

逻辑不正确。但是,如果删除条件检查 [class.collapse]='current != i' 这会解决你的问题。不需要其他东西。

推荐文章

lahsrah · 在何处声明角捕获所有(未找到)路由

7 年前

Mike · 在Angular 4中处理两个URL(矩阵和查询)参数+

7 年前

iChrome · 同时向两个组件施加角度载荷

7 年前

MarcoLe · Angular 5-路由更改url但不导航

7 年前

Chris O'Brien · 角度5个子管线向管线添加括号

7 年前

user1059939 · 是否在子路由中保留路由参数?

7 年前

Sathya V · 路线导航时角度组件属性未重置

7 年前

Sakkeer A · 如何在单击Angular 2中的按钮时实现全屏窗口功能?

7 年前

progman · 在Angular中导航时,第三方库不工作

7 年前

Marco24690 · 角度2向应用程序根组件发射事件

7 年前