使用角度事件单击添加和删除类答案

【问题标题】：Add and remove classes with event click in angular使用角度事件单击添加和删除类
【发布时间】：2019-09-09 23:21:54
【问题描述】：

我想通过单击事件添加一个或另一个类，我正在使用 angular ngClass，但它对我不起作用。当您单击“li”元素时，它会调用一个函数来更改“isExpandedConectivity”变量的值，但什么也不做。

组件.html：

 <li class="nav-item" (click)="changeCollapsed()" aria-controls="collapseUsuarios">
            <a href="#" class="nav-link">
                <span class="w-20px text-center mr-2">
                    <i class="fad fa-analytics"></i>
                </span>
                Conectividad
                <span class="w-100">
                    <i [ngClass]="'fad float-right isExpandedConectividad ? fa-chevron-down : fa-chevron-right"></i>
                </span>
            </a>
            <ul id="collapseConectividad" [collapse]="!isCollapsedConectividad" [isAnimated]="true" class="nav flex-column ml-5">
                <li class="nav-item">Tareas</li>
                <li class="nav-item">Diario</li>
            </ul>
        </li>

组件.ts：

export class SidebarComponent {
  isCollapsedTrabajo = false;
  isCollapsedUsuarios = false;
  isCollapsedConectividad = false;
  isExpandedConectividad = false;

  changeCollapsed(): void{
    this.isCollapsedConectividad = !this.isCollapsedConectividad;
    this.isExpandedConectividad = !this.isExpandedConectividad;
    console.log(this.isExpandedConectividad);
  }
}

【问题讨论】：

我认为这可能只是 [class]，至少对我有用
你还有一个无与伦比的：'它看起来像

标签： angular typescript

【解决方案1】：

您可以将静态应用的类和动态应用的类分开 -

<i class="fad float-right" [ngClass]="isExpandedConectividad ? 'fa-chevron-down' : 'fa-chevron-right'"></i>

检查可比的StackBlitz here

您可以查看usage of ngClass here。在您的情况下，布尔值在单引号下进行评估 - ' '

【讨论】：

【解决方案2】：

我总是这样做：

HTML：

 <button (click)="onClick()">

TS：

activeClass: boolean;    
onClick() {this.activeClass = !this.activeClass}

再次在 HTML 中：

<div [ngClass]="{cssClass1: activeClass, cssClass2: !activeClass}">

您可以根据需要添加任意数量的类，尽管布尔值还不够 ^^

【讨论】：

【解决方案3】：

[class.yourclassename]="isExpandedConectivity"

如果此条件为真，则将添加该类

【讨论】：