Angular 4 hide/show 使用 ng-container

Question

使用 ng-container 显示和隐藏列表项时出现问题。当我 select 显示子项的列表项列出它时 returns 所有子项列表，而不仅仅是 selected 的。

List1 (Selected)
-item1
-item2

List2 (not selected but still showing items when List1 is selected and vice versa)
-item1
-item2

HTML

<ul class="side-nav" *ngFor="let sideNavMenuItem of sideNavMenuItems;">

    <ng-container>
      <li *ngIf="sideNavMenuItem.subMenu">
        <a id="link" routerLink="{{ sideNavMenuItem.url }}">

          <i class="menu-icon fa {{ sideNavMenuItem.menuIcon }}" aria-hidden="true">
          </i> <span class="menu-name" (click)="toggle()" id="bt">{{ sideNavMenuItem.menuName }}</span>

          <ul *ngFor="let subMenu of sideNavMenuItem.subMenu">
            <li *ngIf="show"><a routerLink="{{ subMenu.url }}">{{ subMenu.menuName}}</a>
            </li>
          </ul>

        </a>
      </li>
    </ng-container>
  </ul>

组件

toggle() {
    this.show = !this.show;
  }

Answer 1

将显示更改为布尔数组而不是对所有对象的一个值。
并将索引添加到 *ngFor:

<ul class="side-nav" *ngFor="let sideNavMenuItem of sideNavMenuItems; let i = index">

在点击事件上，添加对象的索引：

<span class="menu-name" (click)="toggle(i)" id="bt">{{ sideNavMenuItem.menuName }}</span>

并将切换功能更改为：

toggle(index) {
  this.show[index] = !this.show[index];
}

*ngIf 中的最后一件事是在显示数组中添加索引

<li *ngIf="show[i]">
  <a routerLink="{{ subMenu.url }}">{{ subMenu.menuName}}</a>
</li>

Angular 4 hide/show 使用 ng-container

Angular 4 hide/show using ng-container

angular-template

angular