Wie filter FirebaseListObservable auf der client-Seite?

Ich bin mit AngularFire2 innerhalb einer Eckigen web-app. Aufgrund der query-Einschränkungen der FB, ich kann nicht form einer Abfrage, liefert genau die Informationen, die ich brauche (zumindest nicht ohne größere änderungen an meinem schema).

So, ich möchte, um eine weitere client-Seite filter-Kriterien innerhalb von javascript (typescript). Wie mache ich das? Kann ich irgendwie einen filter hinzufügen-Funktion, um die beobachtbaren? Unten ist ein fragment, das veranschaulicht, was ich Tue.

In das HTML-Template für die Komponente, ich habe so etwas wie dies weiter unten. Die "jobs" - Variablen in der html-fragment ist eine FirebaseListObservable.

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

Die Komponente-code sieht wie folgt aus:

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

Gibt es eine Möglichkeit, eine filter-Komponente auf dieser.Arbeitsplätze", so dass ich eine lokale (client-Seite) filter?

InformationsquelleAutor Rob Gorman | 2016-09-17

9

Ich lief in das gleiche Problem. Das fehlende Stück war der filter das array selbst (Job[]), und nicht die Beobachtbaren wrapper um ihn herum (FirebaseListObservable<Job[]>).

War in der Lage, dies zu tun mit der RxJS Betreiber 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));

  }
}
```
Wenn job.price > price true zurückgibt, dann ist es enthalten.

Bemerkte auch Ihre jobs Eigenschaft war der Typ FirebaseListObservable<Job> ich hätte gedacht, dass die beobachtbaren Typ sollte Job[] vs Job.
- Ja, du hast Recht. Ich reparierte mein Beispiel. Vielen Dank für die ausgezeichnete Antwort.
InformationsquelleAutor Graham Laming
2

Ich habe nicht gefunden, einen Weg, um wirklich zu filtern, die auf das beobachten, aber ich habe einen workaround für einige Fälle. Kann man pseudo-filter in das element mit *ngFor. Also mein Beispiel wird
```
<tr *ngFor="let job of jobs | async" [hidden]="filter(job)"> 
  .. fill in the table rows
```
Hinzufügen wir fügen Sie die filter () - Methode auf unsere Komponente-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; 
  }
```
Ich bin noch auf der Suche nach einem Weg, um wirklich zu filtern, die auf das beobachtbare, aber für die Zwischenzeit, diese Problemumgehung verwendet werden.
- Ich denke, es gibt einen besseren Weg, dies zu tun mit den primitiven von Observablen. Hat jemand ein Beispiel?
InformationsquelleAutor Rob Gorman

schreiben Sie Ihre eigene Rohr
(ähnlich Filter auf Winkel-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;
 }
 }

verwenden Sie dann dieses Rohr-in-Komponente der Vorlage:

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

InformationsquelleAutor flizelin israel

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.