Angular 隐藏显示不起作用

Question

当我单击一个父项时，所有父项都使用隐藏来渲染他们的子项和类似项。本人新手angular2.求推荐

所以我有以下组件

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>

Answer 1

看起来你传递的是字符串，而不是变量：

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

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>

Angular 隐藏显示不起作用

Angular hide show not working

angular-components

angular