Angular hide show not working

当我点击一位家长时，所有的父母都会呈现他们的孩子，并且与隐藏相似。我是角2的新手。请推荐。Angular hide show not working

所以我有以下组成部分

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

相应的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>

来源

2017-02-18 Saurabh Kumar

你的意思是这样的[折叠式菜单]（http://bootsnipp.com/snippets/featured/accordion-menu）？一次只打开一个菜单的情况。 –

它看起来像在这里你传递字符串，而不是变量：

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

试试这个：

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

来源

2017-02-18 11:27:42 Nikolai

谢谢。它现在有效 –

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>

来源

2017-02-18 11:30:57

Angular hide show not working

回答

相关问题