css - ngClass 在 li background-color angular 2 之间切换

Question

实际行为
当我单击任何子菜单时，所有子菜单都会更改颜色。

期望的行为
当单击 submenu1 时，只有那个应该改变颜色，当 submenu2 被单击时，只有那个应该改变，submenu1(以及任何其他不是 submenu2 的子菜单，甚至是任何其他主菜单中的子菜单)应该回到它的状态原色。

我有以下内容；

<nav class="navigation">
    <ul class="mainmenu">
        <li class="dropdown-content" (click)="onClickHome()"><a href='javascript:void(0)'>Home</a>
        </li>
        <li [class]="hideUsability" *ngFor="let menu of entities">
            <a [ngClass]="{'entities-list__title--active' : menu.isOpen}" (click)="onClickMenu(menu)">{{menu.entity_name}}</a>
            <ul class="dropdown-content" >
                <li [ngClass]="{'btn-add': !menu.isOpen, 'btn-remove': menu.isOpen}" [hidden]="!menu.isOpen" (click)="onClickSubmenu(value.value_id)" *ngFor="let value of menu.values"><a href='javascript:void(0)'>{{value.value_name}}</a></li>
            </ul>
        </li>
    </ul>
</nav>

组件( Angular 2)

    onClickHome(){
        this.closeAllMenus();
        this.router.navigate(['welcome'], { skipLocationChange: true});
    }

    onClickMenu(menu){
        if (!menu.isOpen){
            this.closeAllMenus();
        }
        menu.isOpen = !menu.isOpen;
    }

    onClickSubmenu(value_id: number){
        if(value_id == 2){
            this.router.navigate(['welcome/metrics.html'], { skipLocationChange: true});
        } else{
            this.router.navigate(['welcome/extractor.html'], { skipLocationChange: true});
        }
    }

    closeAllMenus(){
        this.entities.forEach((menu) =>{
            menu.isOpen = false;
        });
    }

CSS:

.btn-add {
    background-color: red;
} 

.btn-remove {
    background-color: green;
}

Answer 1

您的错误来自 menu.isOpen 值更改。

....   
  <li [class]="hideUsability" *ngFor="let menu of entities; let i = index">
          <a [ngClass]="{'entities-list__title--active' : isOpen = i}" (click)="onClickMenu(i)">{{menu.entity_name}}</a>
          <ul class="dropdown-content" >
            <li [ngClass]="{'btn-add': isOpen!=i, 'btn-remove': isOpen==i}" [hidden]="isOpen!=i" (click)="onClickSubmenu(value.value_id)" *ngFor="let value of menu.values"><a href='javascript:void(0)'>{{value.value_name}}</a></li>
          </ul>
   </li>
....

    onClickMenu(index){
       this.isOpen=index
    }