如何在Ionic 2中活跃的列表中的按钮制作按钮



" 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;
        }
      }

相关内容

  • 没有找到相关文章

最新更新