9

Angular Web アプリ内で 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" にフィルター コンポーネントを適用する方法はありますか?

4

3 に答える 3

9

私は同じ問題に遭遇しました。欠落していたのは、配列自体をフィルタリングすること ( ) であり、配列Job[]を囲む Observable ラッパー ( ) ではありませんFirebaseListObservable<Job[]>。

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));

  }
}

job.price > pricetrue を返す場合は、含まれています。

jobsまた、あなたのプロパティがタイプであることに気づきました。観察可能なタイプはvsFirebaseListObservable<Job>であるべきだと思いました。Job[]Job

于 2016-12-29T13:09:37.357 に答える
2

オブザーバブルを実際にフィルタリングする方法は見つかりませんでしたが、場合によっては回避策を見つけました。*ngFor を使用して要素を疑似フィルタリングできます。だから私の例は

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

コンポーネント コードに filter() メソッドを追加します。

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

オブザーバブルを実際にフィルタリングする方法をまだ探していますが、当面はこの回避策を使用できます。

于 2016-09-19T18:23:47.377 に答える