" detail" in *ngfor 来自 Server ,它包含列表。 我正在从中选择 item 。我想制作按钮活动 用户单击它,它应该保留活动,直到用户选择另一个 选项从列表中。我正在使用 [ngclass] ,但是它正在激活一个按钮 1至2 秒。
<ion-list>
<button ion-item [ngClass]="configop.selection" *ngFor="let configop of detail" (click)="itemSelected(configop)" >
<div class="ion-item optionalItem">
<div class="ion-button">
<span class="color-code" >
<img src="{{configop.image}}">
</span>
<span class="color-name">{{ configop.name }}</span>
<span class="color-price">{{ configop.price|currency:'PKR':false }}</span>
</div>
</div>
</button>
</ion-list>
.ts file
itemSelected(configop: any) {
if(this.selection !=null){
if(configop.name == this.selection){
this.storage.remove('carPaint');
this.selection=configop.name;
}
else {
this.storage.remove('carPaint');
this.storage.set('carPaint', configop);
this.selection=configop.name;}
}
else {
this.storage.set('carPaint', configop);
this.selection=configop.name;}
}
根据所选ID
将唯一ID分配给每个按钮,并将唯一ID分配给另一个变量和CSS类<button (click)="active(1)" [ngClass]="{'activeclass': activebutton === 1 }" type="button">button1</button>
<button (click)="active(2)" [ngClass]="{'activeclass': activebutton === 2 }" type="button">button2</button>
使CSS类添加到选定的按钮
的函数 public activebutton: number;
active(buttonvalue: number) {
if (this.activebutton === buttonvalue) {
this.activebutton= 0;
}
else {
this.activebutton= buttonvalue;
}
}