angular - 如何在客户端过滤 FirebaseListObservable？

Question

我在 Angular 网络应用程序中使用 AngularFire2。由于 Firebase 的查询限制，我无法形成一个能够准确提供我需要的数据的查询(至少在不对我的模式进行重大更改的情况下)。

所以我想在 javascript (typescript) 中应用一个额外的客户端过滤条件。我该怎么做呢？我可以以某种方式向可观察对象添加过滤函数吗？下面是一个片段，说明了我在做什么。

在组件的 HTML 模板中，我有类似下面的内容。 html 片段中的“jobs”变量是一个 FirebaseListObservable。

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

组件代码如下所示:

   // 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}})
   }

有没有办法在“this.jobs”上应用过滤器组件，以便我可以应用本地(客户端)过滤器？

Answer 1

我遇到了同样的问题。缺少的部分是过滤数组本身(Job[])，而不是它周围的 Observable 包装器(FirebaseListObservable<Job[]>)。

能够使用 RxJS 运算符做到这一点 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));

  }
}

如果job.price > price返回 true，然后它被包含。

还注意到您的 jobs属性类型为 FirebaseListObservable<Job> , 我本以为可观察类型应该是 Job[]对比Job .