如何在 Ionic 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 分配给另一个变量和 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;
        }
      }