Question

我正在尝试隐藏和显示icon的click事件上的div。为此，我将ngClass与condition一起使用。当condition中的变量更改时，该类保持不变，不会更新该类。

// 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>

// onclick图标.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

此botocore.exceptions.ClientError: An error occurred (InvalidAMIID.NotFound) when calling the RunInstances operation: The image id '[ami-0d8f6eb4f641ef691]' does not exist模式将您的[ngClass]="'showpanel' ? 'show' : 'hidden'"作为字符串，因此它将始终被评估为showpanel并返回true类。删除 'show' ，它将正确评估

Answer 3

您尚未在问题中添加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>

在您的aap.component.ts

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

在您的app.component.css

中

.show {
 display: block;
}

.hidden {
  display: none;
}

用'mat-icon'替换'div'

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

Answer 4

<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;
    }

即使没有功能，您也可以执行相同的操作。

Stackblitz link here

如果您希望函数执行相同的操作

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

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

4 个答案: