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

【问题标题】：ngClass switch between li background-color angular 2ngClass 在 li background-color angular 2 之间切换
【发布时间】：2017-08-16 02:53:48
【问题描述】：

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

期望的行为
当单击子菜单 1 时，仅应更改颜色，单击子菜单 2 时，仅应更改颜色，子菜单 1（以及任何其他不是子菜单 2 的子菜单，甚至任何其他主菜单中的子菜单）都应返回到它原色。

以下是我所拥有的；

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

【问题讨论】：

标签： css angular

【解决方案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
    }

【讨论】：

我@Vega，我无法实施您的更改，但您提出的移动功能已经尝试了，您能否再次检查并给我一些反馈？（顺便说一下，Angular 的新手）
我正在尝试做一个 plunker。你能提供“实体”的例子吗
直到那时，我在
类 btn-add 将不会被应用，因为
将被 [hidden] 条件隐藏。所以留下一个或另一个

在 onClickMenu(menu) 中应该是 this.entities[menu.id].isOpen = true/false ，因此您应该将函数签名更改为 onClickMenu(id) 并在模板调用中（单击)="onClickMenu(menu.id)"

但是使用 plunker 会更容易，并且需要一个包含一些示例数据的“实体”结构样本。

【解决方案2】：

解决方案

这是一个更简洁的代码，使用 [ngClass]="{active: value.highlighted}" 如果它是活动的（true/false），我可以选择我想要应用于所需项目的样式，我的菜单也是光标悬停在菜单上时的下拉菜单在指向其他地方时显示子菜单隐藏子菜单，通过这种方法，我可以使菜单保持打开状态，显示子菜单并突出显示正确的子菜单。

为了指出我正在使用两个 *ngFor（一个对象数组和对象数组）。

HTML

<nav class="navigation">
    <ul class="mainmenu">
        <li class="dropdown-content" (click)="onClickHome()"><a [class]="activeMenuHome">Home</a>
        </li>
        <li *ngFor="let menu of entities"><a>{{menu.entity_name}}</a>
            <ul class="dropdown-content" [hidden]="!menu.isOpen">
                <li *ngFor="let value of menu.values">
                    <a [ngClass]="{active: value.highlighted}" (click)="onClickSubMenu(menu, value)">{{value.value_name}}</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

组件（角度 2）

    onClickHome(){
        this.activeMenuHome="active";
        this.activeSubmenu="";
        this.closeAllMenus();
        this.highlightedOff();
        this.router.navigate(['welcome'], { skipLocationChange: true});
    }

    onClickSubMenu(menu, value){
        this.activeMenuHome="";
        this.closeAllMenus();
        this.highlightedOff();
        menu.isOpen = true;
        value.highlighted = true;
        //More code to navigate
    }

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

    highlightedOff(){
        this.entities.forEach((values) =>{
            values.values.forEach((value) => {
                value.highlighted = false;
            });
        });
    }

CSS

.active {
    background-color: #C8E0F6 !important;
    color: #151921 !important;
}

【讨论】：

使用 CSS 来避免使用 Angular 是一种避免框架的解决方法。