TS

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

UI

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

注意:上述方法工作得非常好。 但我想用更好的方式来做。