在 Angular 中打開新項目時折疊已經消耗的項目

Question

我有這么多代碼來形成側欄菜單的樹結構，這工作正常。 但我想要的是假設一個菜單有它的子菜單並且它被擴展了。 一旦用戶單擊任何其他父菜單，展開的菜單應折疊。 任何人都可以幫我解決這個問題嗎？

 <ng-container *ngTemplateOutlet="treeViewList; context: { $implicit: pageMenus }"></ng-container>
  <ng-template #treeViewList let-list>
    <ul>
      <li *ngFor="let item of list">
        <a (click)="item.isopen = !item.isopen">
          <div>
            <mat-icon>{{ item.menuIcon }}</mat-icon>
            <span class="icon-text">{{ item.menuName }}</span>
          </div>
          <i class="fa fa-angle-right" [ngClass]="{ clicked: item.isopen }" aria-hidden="true"></i>
        </a>
        <ul *ngIf="item.children && item.isopen">
          <ng-container *ngTemplateOutlet="treeViewList;context: { $implicit: item.children }">
          </ng-container>
        </ul>
      </li>
    </ul>
  </ng-template

有效載荷::

 pageMenus = [
    {
      "menuName": "Dashboard",
      "menuIcon": 'dashboard',
      "path": "",
      "children": [
        {
          "menuName": "Status",
          "menuIcon": "",
          "path": "/dashboard",
        }
      ]
    }, {
      "menuName": "Database",
      "menuIcon": 'layers',
      "path": "",
      "children": [
        {
          "menuName": "Users",
          "menuIcon": "",
          "path": "/user",
        },
        {
          "menuName": "Devices",
          "menuIcon": "",
          "path": "/device",
        },
        {
          "menuName": "Sessions",
          "menuIcon": "",
          "path": "/session",
        }
      ]
    }
]

Answer 1

您可以 openIndex，而不是為每個項目使用 isOpen 變量。 如果 itemIndex 等於 open index 則只顯示子菜單

 <ng-container *ngTemplateOutlet="treeViewList; context: { $implicit: pageMenus }"></ng-container>
  <ng-template #treeViewList let-list>
    <ul>
      <li *ngFor="let item of list; let index = index">
        <a (click)="openIndex = openIndex === index ? -1 : index">
          <div>
            <mat-icon>{{ item.menuIcon }}</mat-icon>
            <span class="icon-text">{{ item.menuName }}</span>
          </div>
          <i class="fa fa-angle-right" [ngClass]="{ clicked: openIndex === index }" aria-hidden="true"></i>
        </a>
        <ul *ngIf="item.children && openIndex === index">
          <ng-container *ngTemplateOutlet="treeViewList;context: { $implicit: item.children }">
          </ng-container>
        </ul>
      </li>
    </ul>
  </ng-template

您必須在組件中創建一個新變量 openIndex。