Question

我想在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。我的问题是现在如何检查菜单是否具有子菜单，以及如何添加路由器链接以及如何检查是否具有子菜单。请帮助

Answer 1

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

const newArray = this.array.filter(temp => temp[0] === 'schuldig');
var total = 0;
for (each of newArray) {
  total += each[1];
}
const avg = (total/newArray.length);

参考DEMO。

Answer 2

错误在行

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

逻辑未正确完成。但是，如果删除条件检查[class.collapse]='current != i'，将解决您的问题。不需要了。

Bootstrap 4手风琴可在角度4中导航

2 个答案: