如何在离子4中选择离子按钮阵列？

Question

我必须 select 产品尺寸，所以必须一次 select 一个选项。我不知道该怎么办，请帮助我

<div class="size-scroll" scrollX="true">
      <button ion-button class="btn-size size-span" *ngFor="let category of sizeArray ;let ind = index"
        (click)="btnActivate(category)"
        [class.selected]="category.isSelected === isSelected">{{category.title}}</button>
    </div>

btnActivate(ind) {
     console.log(ind.isSelected)
    this.isSelected = true;
  }

sizeArray = [
    {
      "title": "Btn1",
      "isSelected": "true"
    },
    {
      "title": "Btn2",
      "isSelected": "true"
    },
    {
      "title": "Btn3",
      "isSelected": "true"
    }
  ];

<div class="size-scroll" scrollX="true">
      <button ion-button class="btn-size size-span" *ngFor="let category of sizeArray ;let ind = index"
        (click)="btnActivate(category)"
        [class.selected]="category.isSelected === isSelected">{{category.title}}</button>
    </div>

btnActivate(ind) {
     console.log(ind.isSelected)
    this.isSelected = true;
  }

sizeArray = [
    {
      "title": "Btn1",
      "isSelected": "true"
    },
    {
      "title": "Btn2",
      "isSelected": "true"
    },
    {
      "title": "Btn3",
      "isSelected": "true"
    }
  ];

像 flipkart，我们 select 我想创建这样的尺寸选项。谁能帮帮我。

那么如何动态更改用户 select 的更改按钮颜色？

Answer 1

Html:

<div class="size-scroll" scrollX="true">
  <button [ngClass]="{'selected':category.isSelected}"  class="btn-size size-span" *ngFor="let category of sizeArray;let i = index" (click)="btnActivate(i)">{{category.title}}</button>
</div>

css:

.selected{
  background-color:red;
}

ts（组件）：

    btnActivate(ind) {
       for(let i=0;i<this.sizeArray.length;i++){
         this.sizeArray[i].isSelected = false;
       }
       this.sizeArray[ind].isSelected = true;
    }

sizeArray = [
    {
      "title": "Btn1",
      "isSelected": false
    },
    {
      "title": "Btn2",
      "isSelected": false
    },
    {
      "title": "Btn3",
      "isSelected": false
    }
  ];

工作演示：link

如何在离子4中选择离子按钮阵列？

how to do selection of array of ion-button in ionic 4?

ionic-framework

angular

ionic4