Bootstrap 列表在 angular 13 选择时激活两个菜单

Question

<ul class="nav">        
    <li class="nav-item" *ngFor="let menu of menuList">

      <a class="nav-link" href="index.html" *ngIf="menu.subMenu?.length<1">
        <i class="icon-grid menu-icon"></i>
        <span class="menu-title">{{menu.title}}</span>
      </a>

      <a class="nav-link"  *ngIf="menu.subMenu?.length>0" data-toggle="collapse"
         href="#ui-basic" aria-expanded="false" aria-controls="ui-basic">
        <i class="icon-layout menu-icon"></i>
        <span class="menu-title">{{menu.title}}</span>
        <i class="menu-arrow"></i>
      </a>
      <div class="collapse" id="ui-basic" *ngIf="menu.subMenu?.length>0">
        <ul class="nav flex-column sub-menu">
          <li class="nav-item" *ngFor="let sub of menu.subMenu">
            <a class="nav-link">
              {{sub.title}}
            </a>
          </li>              
        </ul>
      </div>
    </li>
  </ul>


   export const SideBarMenu = [
     {
    id: 'dashboard',
    title: 'Dashboard',
    icon: 'icon-grid menu-icon',
    url: '',
  },
  {
    id: 'task',
    title: 'Task',
    icon: 'icon-layout menu-icon',
    url: '',
    subMenu: [
      {
        id: 'task1',
        title: 'Task 1',
        icon: '',
        url: '',
       },
      {
        id: 'task2',
        title: 'Task 2',
        icon: '',
        url: '',
      },
    ],
  },
  {
    id: 'scheduler',
    title: 'Scheduler',
    icon: 'icon-layout menu-icon',
    url: '',
    subMenu: [
      {
        id: 'calendar',
        title: 'Calendar',
        icon: '',
        url: '',
       },
       {
        id: 'scheduler',
        title: 'Scheduler',
        icon: '',
        url: '',
      },
      {
        id: 'orders',
        title: 'Orders',
        icon: '',
        url: '',
       },
       {
        id: 'users',
        title: 'Users',
        icon: '',
        url: '',
       },
       {
        id: 'sales',
        title: 'Sales',
        icon: '',
        url: '',
       },
     ],
   },
 ];

你好，我已经创建了 bootstrap 侧边栏，如果我点击列表，它也会激活其他菜单（请参阅图 2）如何解决这个问题。抱歉，如果您不明白问题，请参考图片进行说明。

我正在使用 ngFor 循环来显示所有侧边栏菜单如果我 select 任何一个菜单它也激活其他菜单也请帮助我找到解决方案。

Answer 1

您应该为菜单创建唯一的 ID 像这样 'ui-basic'+index

<ul class="nav">        
    <li class="nav-item" *ngFor="let menu of menuList; let index = index"">
      <a class="nav-link" href="index.html" *ngIf="menu.subMenu?.length<1">
        <i class="icon-grid menu-icon"></i>
        <span class="menu-title">{{menu.title}}</span>
      </a>
      <a class="nav-link"  *ngIf="menu.subMenu?.length>0" data-toggle="collapse"
         href="#ui-basic" aria-expanded="false" [aria-controls]="'ui-basic'+index">
        <i class="icon-layout menu-icon"></i>
        <span class="menu-title">{{menu.title}}</span>
        <i class="menu-arrow"></i>
      </a>
      <div class="collapse" [id]="'ui-basic'+index" *ngIf="menu.subMenu?.length>0">
        <ul class="nav flex-column sub-menu">
          <li class="nav-item" *ngFor="let sub of menu.subMenu">
            <a class="nav-link">
              {{sub.title}}
            </a>
          </li>              
        </ul>
      </div>
    </li>
  </ul>

Bootstrap 列表在 angular 13 选择时激活两个菜单

Bootstrap list activating both menu in angular 13 on selecting

css

bootstrap-4

angular

angular13