如何优化Ionic中日期按钮的选中状态处理逻辑？

Hey there! That hardcoded switch statement gets the job done, but it's far from scalable—if you ever add more days to validDays, you'll have to keep updating that logic manually. Let's refactor this into cleaner, more flexible implementations that adapt automatically.

Best Approach: Track Selected Index (Simplest & Most Scalable) #

Instead of maintaining a separate boolean for every day, just store the index of the currently selected day. This cuts down on redundant code and works seamlessly no matter how many days you add to your list.

Updated TypeScript #

// Replace the isDayClicked object with a single index variable
selectedDayIndex: number | null = null; 

constructor() { } 

setSelectedDay(day: string, index: number): void { 
  // Toggle selection: if clicking the already selected day, deselect it
  this.selectedDayIndex = this.selectedDayIndex === index ? null : index;
  
  // If you don't want toggle functionality (only allow one selected at a time, no deselect), use this instead:
  // this.selectedDayIndex = index;
}

Updated HTML #

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

CSS (No Changes Needed) #

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

Why This Is Better:

• No hardcoding: Works with any number of days in validDays without modifying core logic
• Simpler state: Only one variable to maintain instead of multiple boolean values
• Flexible behavior: Easily add or remove deselect functionality with a single line tweak

Alternative: Maintain Boolean Object (If You Prefer This Pattern) #

If you need to keep the isDayClicked object for specific use cases, you can still eliminate the switch statement by resetting states dynamically:

Updated TypeScript #

isDayClicked: { [key: number]: boolean } = {}; 
validDays: string[]; // Assume this is defined elsewhere in your component

constructor() { 
  // Initialize all days to unselected when the component loads
  this.validDays.forEach((_, idx) => {
    this.isDayClicked[idx] = false;
  });
} 

setSelectedDay(day: string, index: number): void { 
  // Reset all days to unselected
  Object.keys(this.isDayClicked).forEach(key => {
    this.isDayClicked[parseInt(key)] = false;
  });
  
  // Mark the clicked day as selected
  this.isDayClicked[index] = true;
}

This way, you don't have to update the code when adding new days—it'll automatically handle any length of validDays.

内容的提问来源于stack exchange，提问作者Sampath