Angular hide show funktioniert nicht

Question

Wenn ich auf ein Elternteil klicke, rendern alle Eltern ihr Kind und ähnliches mit hide. Ich bin neu in eckigen 2. Bitte empfehlen.

So habe ich die folgende Komponente

import { Component, Input } from '@angular/core'; 

@Component({ 
    selector: 'sidebar-cmp', 
    templateUrl: 'sidebar.html', 
    styleUrls: [ 
     'sidebar.scss' 
    ] 
}) 

export class SidebarComponent { 
    @Input() tenants = 0; 
    showMenu: string = ''; 

    addExpandClass(element: any) { 
     if (element === this.showMenu) { 
      this.showMenu = '0'; 
     } else { 
      this.showMenu = element; 
     } 
    } 
} 

entsprechenden HTML

<nav class="sidebar"> 
    <ul class="list-group" *ngFor="let tenant of tenants ;trackBy: trackId"> 
     <div class="nested-menu"> 
      <a class="list-group-item" (click)="addExpandClass('tenant.id')"> 
       <span><i class="fa fa-th-list"></i> &nbsp; {{tenant.name}}</span> 
      </a> 
      <li class="nested" [ngClass]="{'expand' : showMenu === 'tenant.id' }"> 
       <ul class="submenu"> 
        <li> 
         <a href><span>Submenu</span></a> 
        </li> 
        <li> 
         <a href><span>Submenu</span></a> 
        </li> 
       </ul> 
      </li> 
     </div>  
    </ul> 
</nav> 

Answer 1

Es sieht aus wie ist hier Sie String übergeben, nicht variabel:

<a class="list-group-item" (click)="addExpandClass('tenant.id')"> 
     <span><i class="fa fa-th-list"></i> &nbsp; {{tenant.name}}</span> 
    </a> 

Versuchen Sie folgendes:

<a class="list-group-item" (click)="addExpandClass(tenant.id)"> 
     <span><i class="fa fa-th-list"></i> &nbsp; {{tenant.name}}</span> 
    </a> 

Und dementsprechend:

<li class="nested" [ngClass]="{'expand' : showMenu === tenant.id }"> 

Answer 2

You are mistake in writing the [ngClass] 'tenant.id' is not a string. So why are pass as string. 

<nav class="sidebar"> 
    <ul class="list-group" *ngFor="let tenant of tenants ;trackBy: trackId"> 
     <div class="nested-menu"> 
      <a class="list-group-item" (click)="addExpandClass('tenant.id')"> 
       <span><i class="fa fa-th-list"></i> &nbsp; {{tenant.name}}</span> 
      </a> 
      <li class="nested" [ngClass]="{'expand' : showMenu === tenant.id }"> 
       <ul class="submenu"> 
        <li> 
         <a href><span>Submenu</span></a> 
        </li> 
        <li> 
         <a href><span>Submenu</span></a> 
        </li> 
       </ul> 
      </li> 
     </div>  
    </ul> 
</nav>