css - ngClass 中的条件发生变化但类未更新

Question

我试图在图标的单击事件上隐藏和显示 div。因为我正在使用带有条件的 ngClass。当条件中的变量更改时，类保持不变，它不会更新类。

//html

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

//隐藏和显示div

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

//点击图标.ts代码

onIconClick() {
    if (this.showpanel) {
      this.showpanel = false;
    } else {
      this.showpanel = true;
    }
    console.log(this.showpanel);
}

Answer 1

去除条件(showpanel)单引号

试试这个:

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