以更好的方式处理按钮的活动选择答案

【问题标题】：Handle Active selection of a button in a better way以更好的方式处理按钮的活动选择
【发布时间】：2020-09-28 18:22:42
【问题描述】：

isDayClicked: { [key: number]: boolean } = {};


  constructor() { }

  setSelectedDay(day: string, index: number): void {

    switch (index) {
      case 0:
        this.isDayClicked[0] = true;
        this.isDayClicked[1] = false;
        this.isDayClicked[2] = false;
        break;
      case 1:
        this.isDayClicked[0] = false;
        this.isDayClicked[1] = true;
        this.isDayClicked[2] = false;
        break;
      case 2:
        this.isDayClicked[0] = false;
        this.isDayClicked[1] = false;
        this.isDayClicked[2] = true;
        break;
      default:
    }
  }

html

<ion-col size="4" *ngFor="let d of validDays;let i = index;">
      <ion-button expand="block" fill="outline" 
        [ngClass]="{'active':isDayClicked[i]}" (click)="setSelectedDay(d,i)">
        {{d}}
      </ion-button>
    </ion-col>

css

.active {
    background-color: var(--ion-color-primary);
}

用户界面

我有如上图所示的按钮。我需要显示一个活动按钮。所以我使用了上面的技巧。但它似乎是硬编码的东西。即this.isDayClicked[0] = true;this.isDayClicked[1] = false;this.isDayClicked[2] = false;我有更好的方法来处理这种用例吗？

注意：上述方法运行良好。但我想以更好的方式做到这一点。

【问题讨论】：

这个问题属于codereview
创建变量selectedIndex，默认可以为null。点击按钮可以设置selectedIndex == current index of button。然后在[ngClass]="{'active': selectedIndex === i}"

标签： html css angular typescript ionic-framework

【解决方案1】：

你可以这样做。

在你的 ts 文件中创建一个新变量

public selectedIndex = null;

然后在您的 setSelectedDay 函数中更改此变量。

setSelectedDay(day: string, index: number): void {
  this.selectedIndex = index
}

然后在你的 html 中这样做。

<ion-col size="4" *ngFor="let d of validDays;let i = index;">
  <ion-button expand="block" fill="outline" 
    [ngClass]="{'active':selectedIndex === i}" (click)="setSelectedDay(d,i)">
    {{d}}
  </ion-button>
</ion-col>

如果您有任何疑问，请告诉我。

【讨论】：