Ionic+Firebase活动应用：我的日程收藏项筛选实现求助

Hey there! Let's work through this problem together—getting your "My Schedule" page to show only the events a user has favorited is totally manageable once we nail down the data structure and filtering logic. Below are the most common approaches based on typical Firebase data patterns, plus fixes for common pitfalls.

First: Confirm Your Firebase Data Structure #

How you store favorite status will dictate the filtering method. Let's cover the two most common setups:

1. Events Store Favorite User IDs #

This is the most efficient setup, where each event document has a favorites object mapping user IDs to true when favorited:

events/
  event_abc123/
    title: "Summer Music Festival"
    date: "2024-08-15"
    favorites: {
      user_xyz789: true,
      user_qrs456: true
    }

Filter Directly in Firebase Query (Recommended)

Instead of pulling all events and filtering locally, let Firebase do the heavy lifting—this saves bandwidth and keeps your data realtime.

In your Ionic service (e.g., event.service.ts):

import { getAuth, User } from '@angular/fire/auth';
import { Firestore, collection, query, where, collectionData } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

// Assume this is your event interface
interface Event {
  id: string;
  title: string;
  date: string;
  favorites: Record<string, boolean>;
}

@Injectable({ providedIn: 'root' })
export class EventService {
  constructor(private firestore: Firestore) {}

  getFavoriteEvents(): Observable<Event[]> {
    const currentUser: User | null = getAuth().currentUser;
    if (!currentUser) return new Observable(sub => sub.next([]));

    // Query events where the current user's ID exists in favorites with value true
    const eventsQuery = query(
      collection(this.firestore, 'events'),
      where(`favorites.${currentUser.uid}`, '==', true)
    );

    // Return observable for realtime updates
    return collectionData(eventsQuery, { idField: 'id' }) as Observable<Event[]>;
  }
}

Then in your "My Schedule" page component:

import { EventService } from '../services/event.service';
import { Observable } from 'rxjs';

export class MySchedulePage {
  favoriteEvents$: Observable<Event[]>;

  constructor(private eventService: EventService) {
    this.favoriteEvents$ = this.eventService.getFavoriteEvents();
  }
}

And in your page's HTML:

<ion-content class="ion-padding">
  <ion-list *ngIf="(favoriteEvents$ | async) as events">
    <ion-item *ngFor="let event of events">
      <ion-label>
        <h2>{{ event.title }}</h2>
        <p>{{ event.date }}</p>
      </ion-label>
      <ion-icon name="star" slot="end" color="warning"></ion-icon>
    </ion-item>
    <ion-item *ngIf="events.length === 0">
      <ion-label>No favorite events yet—start adding some!</ion-label>
    </ion-item>
  </ion-list>
</ion-content>

2. User Document Stores Favorite Event IDs #

If your setup has a user document with an array of favorited event IDs:

users/
  user_xyz789/
    name: "Jane Doe"
    favoriteEventIds: ["event_abc123", "event_def456"]

Fetch User's Favorites, Then Get Corresponding Events

In your service:

import { getAuth, User } from '@angular/fire/auth';
import { Firestore, doc, getDoc, collection, query, where, getDocs } from '@angular/fire/firestore';

export class EventService {
  constructor(private firestore: Firestore) {}

  async getFavoriteEvents(): Promise<Event[]> {
    const currentUser: User | null = getAuth().currentUser;
    if (!currentUser) return [];

    // First get the user's favorite event IDs
    const userDocRef = doc(this.firestore, 'users', currentUser.uid);
    const userDoc = await getDoc(userDocRef);
    const favoriteEventIds = userDoc.data()?.favoriteEventIds || [];

    if (favoriteEventIds.length === 0) return [];

    // Fetch all events with those IDs
    const eventsQuery = query(
      collection(this.firestore, 'events'),
      where(documentId(), 'in', favoriteEventIds)
    );
    const eventsSnapshot = await getDocs(eventsQuery);
    
    return eventsSnapshot.docs.map(doc => ({ ...doc.data(), id: doc.id } as Event));
  }
}

Common Pitfalls to Fix #

• User Authentication Check: Always handle cases where the user isn't logged in—return an empty array or redirect to login.
• Firebase Security Rules: Make sure your rules allow users to only access events they're allowed to see. For example, if using the first structure:

  rules_version = '2';
  service cloud.firestore {
    match /databases/{database}/documents {
      match /events/{eventId} {
        allow read: if request.auth != null;
        allow write: if request.auth != null;
      }
    }
  }
  

• Local Filtering (If Needed): If you already pull all events for the "Full Schedule" page, you can filter locally like this:

  // allEvents is your full array of events
  // currentUserId is the logged-in user's UID
  const myFavorites = allEvents.filter(event => 
    event.favorites?.[currentUserId] === true
  );
  

Final Notes #

Using Firebase's built-in query filtering is always better for performance, especially as your event list grows. It keeps your app responsive and reduces unnecessary data transfer.

内容的提问来源于stack exchange，提问作者Pepe Ocaña