如何在客户端过滤FirebaseListObservable？

Question

I am using AngularFire2 within an Angular web app. Due to the query limitations of Firebase, I can't form a query that delivers exactly the data I need (At least not without making major changes to my schema).

So I want to apply an additional client-side filter criteria within javascript (typescript). How do I do this? Can I somehow add a filter function to the observable? Below is a fragment that illustrates what I'm doing.

In the HTML Template for the component, I have something like this below. The "jobs" variable in the html fragment is a FirebaseListObservable.

<tr *ngFor="let job of jobs | async"> 
  .. fill in the table rows

The component code looks like this:

   // in the member declaration of the class
   jobs : FirebaseListObservable<Job[]>;

   ...
   // Notice in ngOnInit(), I'm filtering the jobs list using the the
   // Firebase criteria. But I want to filter on an additional field. 
   // Firebase allows only single field criteria, so I'm looking for 
   // a way to apply an additional client-side filter to jobs to eliminate
   // some additional records. 

   ngOnInit(){
      this.jobs = this.af.database.list("/jobs/", {query: {orderByChild : "companyKey", equalTo:someKey}})
   }

Is there a way to apply a filter component on "this.jobs" so that I can apply a local (client-side) filter?

Answer 1

I ran into the same issue. The missing piece was to filter the array itself ( Job[] ), and not the Observable wrapper around it ( FirebaseListObservable<Job[]> ).

Was able to do this using the RxJS operator map .

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map'

...

@Component({
  ...
})
export class JobComponent {

  ...

  getJobsLessThanPrice(price: number): Observable<Job[]> {
    return this.af.database.list('jobs', {query: {...}})
      .map(_jobs => _jobs.filter(job => job.price > price));

  }
}

If job.price > price returns true, then it's included.

Also noticed your jobs property was of type FirebaseListObservable<Job> , I would have thought the observable type should be Job[] vs Job .

Answer 2

I haven't found a way to really filter on the observable, but I have found a workaround for some cases. One can pseudo-filter in the element with *ngFor. So my example becomes

<tr *ngFor="let job of jobs | async" [hidden]="filter(job)"> 
  .. fill in the table rows

Add we add the filter() method to our component code:

// in the member declaration of the class
   jobs : FirebaseListObservable<Job[]>;

   ...

   ngOnInit(){
      this.jobs = this.af.database.list("/jobs/", {query: {orderByChild : "companyKey", equalTo:someKey}})
   }

   filter(job : Job) : boolean{
     // Return true if don't want this job in the results.
     // e.g. lets filter jobs with price < 25;
     if (job.price < 25){
       return true;
     }
     return false; 
  }

I'm still looking for a way to really filter on the observable, but for the meantime, this workaround is usable.

Answer 3

you can write your own pipe (similar to Filter on Angular 1.X)

import {Pipe, PipeTransform} from '@angular/core';
import * as _ from 'lodash';

@Pipe({
  name: 'search'
})
export class SearchPipe implements PipeTransform {

 transform(value: any, args?: any): any {

  if (args) {
    return _.filter(value, d => _.find(_.valuesIn(d), v => 
        _.toLower(v).indexOf(_.toLower(args)) !== -1));
  }

 return value;
 }
 }   

then, use this Pipe in component's template:

<input [(ngModel)]="term"> 
<li *ngFor="let item of items | async | search:term">{{item}}</li>