[英]Bootstrap 4 accordion for navigation in angular 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': []
};
}
這是我的工作示例 。 我的問題是現在如何檢查菜單是否具有子菜單,以及如何添加路由器鏈接以及如何檢查是否具有子菜單。 請幫忙
只需根據我們的需要重新組織對象並執行即可。
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 。
錯誤在行
<div id="collapse1" class="panel-collapse" [class.collapse]='current != i'>
邏輯未正確完成。 但是,如果刪除條件檢查,則[class.collapse]='current != i'
這將解決您的問題。 不需要什么了。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.