material-design - 基于Angular6中ngclass中的条件的按钮颜色变化

Question

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

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

组件.ts

sizeFilter(size_clicked) {
    this.current_product_size = size_clicked
}

Answer 1

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

Answer 2

你的html：

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

您的组件：

isOrange = false;

setOrange() {
    isOrange = !isOrange;
}