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

vector<Node*>::iterator it; 
it = std::find(*(*myVector.begin())->name, *(*myVector.end())->name, found);
if (it != myvector.end()) {
    return true;
}
return false;

组件

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

CSS

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

Answer 2

您的html：

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

您的组件：

isOrange = false;

setOrange() {
    isOrange = !isOrange;
}

基于Angular6中ngclass中条件的按钮颜色更改

2 个答案: