如何过滤客户端的FirebaseListObservable？
我正在使用AngularFire2在一个角度的网页应用程序。由于Firebase的查询限制，我无法形成一个能够准确传递所需数据的查询(至少在不对我的模式进行重大更改的情况下)。
因此，我想在javascript (类型记录)中应用额外的客户端过滤条件。我该怎么做？我可以在可观测的基础上添加一个滤波函数吗？下面是一个片段，说明了我在做什么。
在组件的HTML模板中，下面有类似的内容。html片段中的“作业”变量是一个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“上应用过滤器组件，以便我可以应用本地(客户端)过滤器？
回答 3
Stack Overflow用户
发布于 2016-12-29 05:09:37
我遇到了同样的问题。缺少的部分是过滤数组本身(Job[])，而不是它周围的可观察包装器(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。
Stack Overflow用户
发布于 2016-09-19 10:23:47
我还没有找到一种方法真正过滤可观察到的，但我已经找到了一些解决办法。可以用*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;
}我仍然在寻找一种能够真正过滤可观察到的东西的方法，但同时，这个解决方法是有用的。
Stack Overflow用户
发布于 2017-09-13 02:34:56
您可以编写自己的管道(类似于角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;
}
} 然后，在组件的模板中使用此管道：
<input [(ngModel)]="term">
<li *ngFor="let item of items | async | search:term">{{item}}</li>https://stackoverflow.com/questions/39549729
复制相似问题
腾讯云开发者
