Angular中ng2-datepicker与ui-switch联动及Firebase日期校验问题

Let's break down how to fix the date existence check and switch state syncing step by step:

1. Maintain a Fast Lookup Set/Map for Existing Dates #

First, we need an efficient way to check if a date exists in your Firebase list. Instead of looping through the array every time, use a Set to track existing date strings, and a Map to map dates to their Firebase keys (for quick removal later).

Add these properties to your component:

existingDates = new Set<string>();
dateToKeyMap = new Map<string, string>();

Then update your ngOnInit to sync these collections with Firebase:

ngOnInit() {
  // Sync Firebase dates to our lookup collections
  this.dates.subscribe(dateItems => {
    this.existingDates.clear();
    this.dateToKeyMap.clear();
    
    dateItems.forEach(item => {
      // Use ISO string for consistent date formatting (avoids timezone string discrepancies)
      const standardizedDate = new Date(item.$value).toISOString();
      this.existingDates.add(standardizedDate);
      this.dateToKeyMap.set(standardizedDate, item.$key);
    });
  });

  // Sync selected date from service to datepicker and switch
  this.dateSubscription = this.scheduleService.selectedDate$
    .subscribe(dateStr => {
      const standardizedDate = new Date(dateStr).toISOString();
      this.selectedDate = standardizedDate;
      this.date = new Date(standardizedDate); // Update datepicker model
      // Set switch state: ON if date doesn't exist, OFF if it does
      this.enable = !this.existingDates.has(standardizedDate);
    });
}

2. Sync Datepicker Selection to Switch State #

Update your template to listen for datepicker changes:

<ng-datepicker [(ngModel)]="date" (ngModelChange)="onDateSelected($event)" />
<ui-switch [(ngModel)]="enable" (change)="onSwitchToggled($event)" />

Add the onDateSelected method to your component to update the service and switch state:

onDateSelected(selectedDate: Date) {
  const standardizedDate = selectedDate.toISOString();
  // Update the service's selected date
  this.scheduleService.updateDate(standardizedDate);
  // Set switch state based on existence
  this.enable = !this.existingDates.has(standardizedDate);
}

3. Handle Switch Toggle to Add/Remove Dates #

Implement the onSwitchToggled method to add or remove the date from Firebase based on the switch state:

onSwitchToggled(isEnabled: boolean) {
  const currentDate = this.date.toISOString();
  
  if (isEnabled) {
    // Switch turned ON: date doesn't exist, add it to Firebase
    this.addDate(currentDate);
  } else {
    // Switch turned OFF: date exists, remove it using the mapped key
    const firebaseKey = this.dateToKeyMap.get(currentDate);
    if (firebaseKey) {
      this.removeDate(firebaseKey);
    }
  }
}

4. Standardize Date Formatting (Critical!) #

Using toISOString() ensures consistent date formatting across all operations, avoiding issues with timezone strings or varying toString() outputs between environments. If you have existing data in Firebase with the old format, you can either:

• Migrate existing dates to ISO strings, or
• Adjust the lookup logic to convert old dates to ISO strings when building existingDates and dateToKeyMap

Bonus: Update Your Service to Use ISO Strings #

To keep consistency everywhere, update your scheduleService to use ISO strings instead of raw toString() outputs:

private dateSource = new BehaviorSubject<string>(new Date(Date.now()).toISOString());

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