Angular 4 скрыть/показать с помощью ng-контейнера

Возникла проблема с отображением и сокрытием элементов списка с помощью ng-container. Когда я выбираю элемент списка для отображения списков подэлементов, он возвращает все списки подэлементов, а не только выбранный.

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;
  }

angular angular-template
person Alex D    schedule 10.07.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Измените отображение на массив логических значений вместо одного значения для всех объектов.
и добавьте индекс в *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>
person dAxx_    schedule 10.07.2018