Angular点击事件切换类失效求助：ngClass不生效

你遇到的问题核心是ngClass的语法写错了——你把整个条件判断当成静态字符串包裹起来，导致Angular无法解析里面的表达式，所以点击后视图完全没变化。咱们一步步来修复：

1. 修复ngClass的语法错误 #

你原来的写法是：

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

这里把三元表达式套在了单引号里，Angular只会把它当成一个固定类名，根本不会去判断isExpandedConectividad的取值。下面是两种正确的写法：

方式一：三元表达式直接写（不包单引号）

把公共样式（fad float-right）抽出来，三元表达式只切换变化的类：

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

或者把所有类都放在表达式里：

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

方式二：对象语法（更清晰，适合多类切换）

对象语法规则是{ 类名: 布尔值 }，布尔值为true时自动添加对应类：

<i [ngClass]="{ 
  'fad float-right': true, 
  'fa-chevron-down': isExpandedConectividad, 
  'fa-chevron-right': !isExpandedConectividad 
}"></i>

2. （可选）优化组件变量，减少冗余 #

看你的代码，isCollapsedConectividad和isExpandedConectividad是完全反向的，其实只需要维护一个变量就能实现逻辑，避免重复维护两个变量的麻烦：

修改Component.ts：

export class SidebarComponent {
  isCollapsedTrabajo = false;
  isCollapsedUsuarios = false;
  isExpandedConectividad = false; // 只保留这个变量

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

对应的折叠面板绑定改成：

<ul id="collapseConectividad" [collapse]="!isExpandedConectividad" [isAnimated]="true" class="nav flex-column ml-5">

验证效果 #

现在点击li元素，console.log应该能正常输出true/false的切换，同时图标类会跟着变化，折叠面板也能正常展开/收起了。

内容的提问来源于stack exchange，提问作者auremanci