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

删除条件(显示面板( 单引号

试试这个：

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

Answer 2

<button (click)="showpanel= !showpanel" 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>

CSS

.show {
     display: block;
    }
    .hidden {
      display: none;
    }

没有功能，即使你可以做同样的事情。

堆栈闪电战链接在这里

如果你想让函数做同样的事情，那么

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

Answer 3

此[ngClass]="'showpanel' ? 'show' : 'hidden'"模式将showpanel作为字符串，因此它将始终计算为 true 并返回'show'类。 取下single quote mark，它应正确评估

Answer 4

您尚未在问题中添加 CSS。虽然，我检查了你的代码。您只需要从显示面板中删除引号。请看下面的代码 -

在应用程序组件中.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>

在你的aap.component.ts

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

在您的应用程序组件中.css

.show {
 display: block;
}
.hidden {
  display: none;
}

将"div"替换为"垫子图标">

另外，您可以在此处查看工作示例 - https://stackblitz.com/edit/angular-xsvxd6