Firestore 对两个具有可观察的字段的多个查询

Question

我正在使用 Angular 和 Firestore。

我想在两个字段上对 Firestore 数据库执行多重查询。现在可以使用可以组合的 WHERE 语句。 我的想法是组合这些值，然后向数据库发送请求。例如，我想取回所有城市为洛杉矶、旧金山、纽约且评级为 5、4 的帖子。

所以我必须查询 6 种可能的组合：

Where city = Los Angeles
Where Stars = 5

...然后下一个查询

Where city = Los Angeles
Where stars = 4

...然后下一个查询

Where city = San Francisco
Where Stars = 5

...然后下一个查询

Where city = San Francisco
Where Stars = 4

等等。

我知道如何使用For 语句来处理一个字段和一个值，就像您在下面的代码中看到的那样，但我不知道如何组合它们（在多个查询中组合组合），然后等待所有人执行（使用可观察对象或主题）将它们分组到结果数组中。我在 Stack 上找到了两个答案，但没有人真正帮助我做出正确的决定。

这个，但它只在一个领域，而不是可观察的 Multiple Firestore queries, single promise / callback

这另一个 Firestore multiple range query 谁给出了“对查询中的一个字段和客户端代码中的另一个字段执行过滤”的好主意。 如果您的结果很少，这个解决方案很好，但如果您有很多，它会减慢这个过程，收回我们不需要的数据。

export class AnnoncesListComponent implements OnInit {

  queryParams: { departement:string, secteurAct:string };
  subscriptionChange:Subscription;
  annoncesSubscription:Subscription;
  departementGet: any;
  secteurActGet: any;
  annonceQuery: Annonce[];
  isFetchingData:boolean = false;

  constructor( 
    private activeRoute : ActivatedRoute,
    private annnonceService: AnnoncesService 
    ) { }

  ngOnInit() {
//Get QUERYPARAMS FROM THE URL
   this.departementGet = decodeURIComponent(this.activeRoute.snapshot.queryParams['departement']);
   this.secteurActGet =  decodeURIComponent(this.activeRoute.snapshot.queryParams['secteurActivite']);
   this.departementGet = this.departementGet.split('_B2-');
   this.secteurActGet = this.secteurActGet.split('_B2-');

//FOR - TO QUERIES ALL THE DATA NEEDED - FIRST QUERY
   for (var i = 0; i < this.secteurActGet.length; i++) {
    this.annoncesSubscription = this.annnonceService.getAnnonces('secteurActivite', this.secteurActGet[i])
    .subscribe( responseData => {
      this.isFetchingData = false
        this.annonceQuery = responseData.map(item => {
          return {
            id : item.payload.doc.id,
            secteurAct : item.payload.doc.get('secteurActivite'),
            departement : item.payload.doc.get('departement'),
            region : item.payload.doc.get('region'),
            description : item.payload.doc.get('description'),
            infosClefs : item.payload.doc.get('name'),
          } as Annonce;
        })
        console.log(this.annonceQuery);
    });

//FOR - TO QUERIES ALL THE DATA NEEDED - SECOND QUERY
   for (var i = 0; i < this.departementGet.length; i++) {
    this.annoncesSubscription = this.annnonceService.getAnnonces('secteurActivite', this.departementGet[i])
    .subscribe( responseData => {
      this.isFetchingData = false
        this.annonceQuery = responseData.map(item => {
          return {
            id : item.payload.doc.id,
            secteurAct : item.payload.doc.get('secteurActivite'),
            departement : item.payload.doc.get('departement'),
            region : item.payload.doc.get('region'),
            description : item.payload.doc.get('description'),
            infosClefs : item.payload.doc.get('name'),
          } as Annonce;
        })
        console.log(this.annonceQuery);
    });
};

我的结果是两个单独的数据，没有组合，并且在每次迭代中创建一个 observable。

Answer 1

我认为使用 rxjs/forkJoin 来处理多个并行请求是一种很好的方法。

ForkJoin 接受一个 observable 数组作为它的第一个参数，并返回一个 observable，它在所有传入的 observable 完成后发出。

我已将您的代码重构为更易于阅读的内容，并利用 forkJoin 并行处理部门和部门，然后输出每个结果数据的数组。

如果您正在处理的数据量很大，我什至建议您查看WebWorkers，以便将 CPU 密集型操作拆分为多个线程并避免阻塞主线程。

    // map array of departments into an array of Observables
    const departmentsRequests = this.departementGet.map((departement) => {
        return this.annnonceService.getAnnonces('departement', departement);
    });

    const secteurActiviteRequests = this.secteurActGet.map((secteur) => {
        return this.annnonceService.getAnnonces('secteurActivite', secteur);
    });

    // forkJoin takes all Observables and emits once to its subscription
    this.annoncesSubscription = forkJoin([
        forkJoin(departmentsRequests),
        forkJoin(secteurActiviteRequests),
    ]).subscribe(([departaments, secteurs]) => {
        this.isFetchingData = false;

        // all data has been loaded in parallel from firestore, handle it here
    });

Answer 2

服务中取回数据的函数是这个：

 getAnnonces(champ, valeur){
        return this.firestore.collection('annonce', ref => ref.where(champ, '==', valeur)).snapshotChanges();
      }

我有你的代码，但是当我尝试输出结果时：

 // forkJoin takes all Observables and emits once to its subscription
      this.annoncesSubscription = forkJoin([
          forkJoin(departmentsRequests),
          forkJoin(secteurActiviteRequests),
      ]).subscribe(([departements, secteurs]) => {
          this.isFetchingData = false;
          // all data has been loaded in parallel from firestore, handle it here
          console.log(departements);
      });

没有结果。我尝试使用 .get() 而不是 .snapshotChanges()，但他给了我一个 [QuerySnapshot]