根据 Angular6 中 ngclass 中的条件更改按钮颜色

Question

如果我单击该按钮，它会将颜色更改为橙​​色，但根据要求，在单击同一按钮后，它需要更改为默认颜色。所以请指导我这样做。

  <button #val1 class="mat-raised-button" [ngClass]="{'orange': val1.value==current_product_size}" (click)="sizeFilter(val1.value)" value="375ML">375ML</button>

Component.ts

sizeFilter(size_clicked) {
    this.current_product_size = size_clicked
}

Answer 1

你的html：

 <button #val1 class="mat-raised-button" [ngClass]="{'orange': isOrange}" (click)="setOrange()">375ML</button>

你的组件：

isOrange = false;

setOrange() {
    isOrange = !isOrange;
}

Answer 2

**You can give more than one ngClasses if you want like this** 


<button #val1 class="mat-raised-button" 
[ngClass]="{'toggleColor': toggleColor,'orange': val1.value==current_product_size}" 
(click)="sizeFilter(val1.value)" 
value="375ML">375ML</button>

组件

toggleColor = false;
sizeFilter(size_clicked) {
this.toggleColor = !this.toggleColor;
this.current_product_size = size_clicked
}  

CSS

.toggleColor{
  background: yourDefaultColor !important;
}