按钮颜色根据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;
}