如何使列表中的一個按鈕，活躍在離子2

Question

「細節」在* ngFor從服務器來了，是它包含列表。 ，我從中選擇項目。我想，以使該按鈕活躍時 用戶點擊它，它應該保持積極直到用戶從列表中選擇另一 選項。我正在使用[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;} 
     } 

Answer 1

使一個唯一的ID到每個按鈕和唯一的ID分配給基於所述選擇的ID

<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類製作的功能的CSS類添加到所選擇的按鈕

public activebutton: number; 
    active(buttonvalue: number) { 
     if (this.activebutton === buttonvalue) { 
      this.activebutton= 0; 
     } 
     else { 
      this.activebutton= buttonvalue; 
     } 
     }