Css ngClass中的条件更改，但未更新类

我试图隐藏并显示图标的div on click事件。因此，我将ngClass与条件一起使用。当条件中的变量更改时，该类保持不变，它不会更新该类

//html

<div class="column  icon">
    <mat-icon (click)="onIconClick()" id="icon" class="column" [ngStyle]="showpanel ? {'color':'#4ac2f7'}:''">filter_list</mat-icon>
</div>

删除条件（显示面板）单个报价

试试这个：

<div class="search-box-container" id="filter-tab" [ngClass]="showpanel ? 'show' : 'hidden'">
</div>

删除条件（showpanel）单引号

试试这个：

<div class="search-box-container" id="filter-tab" [ngClass]="showpanel ? 'show' : 'hidden'">
</div>

---

此

[ngClass]=“'showpanel'？'show'：'hidden'”

模式将您的

showpanel

作为字符串，因此它将始终计算为

true

并返回

'show'

类。删除

单引号

，它将正确计算此

[ngClass]=“'showpanel'？'show'：'hidden'”

模式将您的

showpanel

作为字符串，因此它将始终计算为

true

并返回

'show'

类。删除

单引号

，它将正确评估您的问题中没有添加CSS。不过，我检查了你的代码。您只需要从showpanel中删除引号。 请参阅以下代码-

在app.component.html中

 <button (click)="onIconClick()" id="icon" class="column" [ngStyle]="showpanel ? {'color':'#4ac2f7'}:''">filter_list</button>

 <div class="search-box-container" id="filter-tab" [ngClass]="showpanel ? 'show' : 'hidden'">
      filter-tab
 </div>

在app.component.css中

.show {
 display: block;
}

.hidden {
  display: none;
}

将“div”替换为“mat icon”

---

另外，您可以在这里查看工作示例-

您的问题中没有添加CSS。不过，我检查了你的代码。您只需要从showpanel中删除引号。 请参阅以下代码-

在app.component.html中

 <button (click)="onIconClick()" id="icon" class="column" [ngStyle]="showpanel ? {'color':'#4ac2f7'}:''">filter_list</button>

 <div class="search-box-container" id="filter-tab" [ngClass]="showpanel ? 'show' : 'hidden'">
      filter-tab
 </div>

在app.component.css中

.show {
 display: block;
}

.hidden {
  display: none;
}

将“div”替换为“mat icon”

此外，您可以在此处查看工作示例-

没有函数，你也可以做同样的事情

如果你想让函数也这么做

onIconClick() {
this.showpanel =! this.showpanel;
}

没有函数，你也可以做同样的事情

如果你想让函数也这么做

onIconClick() {
this.showpanel =! this.showpanel;
}

---

你能展示你的css代码吗。

onIconClick() {
this.showpanel =! this.showpanel;
}