Angular Firebase多值查询：WHERE IN等价实现问题求助

Hey there! I’ve dealt with this exact scenario plenty of times when building Angular apps with Firebase, so I know how frustrating it can be to translate SQL query logic over to Firebase’s system. Let’s walk through the proper solutions for both Firestore and Realtime Database, since they handle this a bit differently.

Firebase Firestore has a native in operator that mirrors SQL’s WHERE IN behavior—though there’s an important caveat: it only supports up to 10 values per query. Here’s how to implement it in your Angular code:

• First, make sure you’ve imported the necessary modules in your component/service:

  import { AngularFirestore, DocumentData } from '@angular/fire/compat/firestore';
  

• Then, construct your query (using a "products" collection and filtering by category values as an example):

  // The values you want to filter against (max 10)
  const targetCategories = ['electronics', 'clothing', 'home-goods'];
  
  this.firestore.collection('products', ref => 
    ref.where('category', 'in', targetCategories)
  ).valueChanges().subscribe(results => {
    console.log('Filtered products:', results);
    // Handle your data here (e.g., bind to a template variable)
  });
  

• If you need to filter against more than 10 values, you’ll have to split the list into batches of 10, run multiple queries, and combine the results. Here’s a reusable helper function for that:

  async getDocumentsInBatches(collectionName: string, field: string, values: string[]) {
    const queryBatches = [];
    // Split values into chunks of 10
    for (let i = 0; i < values.length; i += 10) {
      const valueChunk = values.slice(i, i + 10);
      queryBatches.push(
        this.firestore.collection(collectionName, ref => ref.where(field, 'in', valueChunk))
          .get().toPromise()
      );
    }
    // Wait for all batches to finish executing
    const batchSnapshots = await Promise.all(queryBatches);
    // Combine all documents into a single array
    const allResults: DocumentData[] = [];
    batchSnapshots.forEach(snapshot => {
      snapshot.docs.forEach(doc => allResults.push(doc.data()));
    });
    return allResults;
  }
  
  // How to use it:
  this.getDocumentsInBatches('products', 'category', largeCategoryList).then(results => {
    console.log('All filtered products:', results);
  });
  

Firebase Realtime Database doesn’t have a built-in IN operator, so we have two practical approaches depending on your dataset size:

Approach 1: Client-side Filtering (Best for Small Datasets) #

Fetch the relevant collection subset and filter the results directly in your Angular app:

import { AngularFireDatabase } from '@angular/fire/compat/database';

const targetUserIds = ['user123', 'user456', 'user789'];

this.db.list('users').valueChanges().subscribe(allUsers => {
  const filteredUsers = allUsers.filter(user => targetUserIds.includes(user['userId']));
  console.log('Filtered users:', filteredUsers);
});

Heads up: This is simple to implement, but avoid it for large collections—you’ll end up downloading more data than necessary, which wastes bandwidth and slows down your app.

Approach 2: Multiple equalTo Queries (Better for Larger Datasets) #

Run separate queries for each value you want to filter by, then combine the results:

async getFilteredItems(field: string, values: string[]) {
  const individualQueries = values.map(value => 
    this.db.list('items', ref => ref.orderByChild(field).equalTo(value))
      .valueChanges().toPromise()
  );
  const queryResults = await Promise.all(individualQueries);
  // Flatten the array of results and remove any duplicates
  const uniqueResults = [...new Set(queryResults.flat())];
  return uniqueResults;
}

// Usage example:
this.getFilteredItems('category', ['books', 'movies', 'music']).then(filteredItems => {
  console.log('Filtered items:', filteredItems);
});

• Firestore Indexes: If your Firestore query throws an error about missing indexes, follow the link in the error message to the Firebase Console—this will auto-generate the required index for you.
• Realtime Database Performance: For large datasets, the multiple equalTo queries approach is more efficient than client-side filtering, but make sure you’ve indexed the child field you’re filtering on (set this up in the Firebase Console).
• Firestore in Limit: Always remember the 10-value cap for the in operator—batching is non-negotiable for larger value lists.

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