为什么我的循环，在 Angular/TypeScript 中循环两次？

Question

为了简单起见，我创建了一个菜单，我的所有项目符号列表都存储在一个数组中。

我的问题是，当我运行循环时，它显示了 2 次，相同的值？？我不明白为什么？

我认为问题出在 HTML 文件中？

admin.component.html

<div class="sidebar">
  <div class="logo-details">
    <i class="bx bxl-c-plus-plus"></i>
    <span class="logo_name">Menu</span>
  </div>
  <ul class="nav-links" *ngFor="let menu of menus; let i = index">
    <li>
      <a routerLink="market">
        <i class="bx bx-grid-alt"></i>
        <span class="links_name"> {{ menu.item }} </span>
      </a>
    </li>

    <li>
      <a routerLink="portfolio">
        <i class="bx bx-grid-alt"></i>
        <span class="links_name">{{ menu.item }} </span>
      </a>
    </li>
  </ul>
</div>
<section class="home-section">
  <nav>
    <div class="sidebar-button">
      <i class="bx bx-menu sidebarBtn"></i>
      <span class="dashboard">Dashboard</span>
    </div>
  </nav>
  <router-outlet></router-outlet>
</section>

TS

export class AdminComponent implements OnInit {
  showSubmenu: any[] = [];

  menus: any[] = [
    {
      item: 'Market',
      submenus: [{ item: 'Item' }],
    },
    {
      item: 'Portfolio',
      submenus: [{ item: 'Element' }],
    },
  ];

  constructor() {}

  ngOnInit() {}

  toggleMenu(index: number) {
    this.showSubmenu[index] = !this.showSubmenu[index];
  }
}

我无法检索每个数组的索引？我可以做这个？如果是这样...请问如何？

https://stackblitz.com/edit/angular-ivy-9ytvbk?file=src/app/admin/admin.component.html

Answer 1

请看这个解决方案：

https://stackblitz.com/edit/angular-ivy-1hnhqr?file=src/app/admin/admin.component.html