如何使用lodash _.filter()过滤firestore集合？
如何使用lodash _.filter()过滤firestore集合？
提问于 2018-08-16 06:57:15
我正在尝试过滤从firebase firestore检索到的集合(在angularfire2的帮助下)。问题是我没有把任何东西放到过滤列表中。
下面是我的代码：
companies.component.ts
import { Component, OnInit } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
import { Observable, BehaviorSubject, combineLatest } from 'rxjs';
import { Company } from '../../shared/models';
import { ReactiveFormsModule, FormGroup, FormBuilder, Validators } from '@angular/forms';
import * as _ from 'lodash';
import { Subject } from 'rxjs';
import { switchMap, map} from 'rxjs/operators';
@Component({
selector: 'app-companies',
templateUrl: './companies.component.html',
styleUrls: ['./companies.component.scss']
})
export class CompaniesComponent implements OnInit {
filters = {}
private companiesCollection: AngularFirestoreCollection<Company>;
companies: any;
filteredCompanies: any;
constructor(private readonly afs: AngularFirestore) {
this.companiesCollection = afs.collection<Company>('companies');
this.getCompanies().subscribe(() => {
this.applyFilters();
});
}
ngOnInit() {
}
getCompanies() {
return this.companies = this.afs.collection<Company>('companies').valueChanges();
}
/// filter properties that resolve to true
filterBoolean(property: string, rule: boolean) {
if (!rule) this.removeFilter(property)
else {
this.filters[property] = val => val
this.applyFilters()
}
}
private applyFilters() {
this.filteredCompanies = _.filter(this.companies, _.conforms(this.filters) )
}companies.component.html
<div class="field">
<input type="checkbox" (change)="filterBoolean('firstCondition', $event.target.checked)"> True or false 1?
</div>
<div class="field">
<input type="checkbox" (change)="filterBoolean('secondCondition', $event.target.checked)"> True or false 2?
</div>
<div class="field">
<input type="checkbox" (change)="filterBoolean('secondCondition', $event.target.checked)"> True or false 3?
</div>
<!-- (WORKING): Displays all the companies names -->
<div *ngFor="let company of companies | async">
<h6>{{ company.name }}</h6>
</div>
<!-- (NOT WORKING): Displays all the filtered companies -->
<div *ngFor="let filteredCompany of filteredCompanies">
<h6>{{ filteredCompany.name }}</h6>
</div>我使用的是：
Angular 6，angularfire2 (v.5)，lodash (v.4)。
帮助：
我是否在某种程度上与数据结构不匹配？有谁有办法解决这个问题吗？
我正在遵循this tutorial from Jeff Delaney，并试图适应firestore，而不是本文中“选项1-客户端过滤”下的实时数据库。
任何能让我更接近目标的帮助都将不胜感激。
使用解决方案进行编辑：
DeborahK的回答帮助我解决了这个问题。
在构造函数中更改为：
this.getCompanies().subscribe(companies => {
this.companies = companies; // <== Added this line
this.applyFilters();
});和函数getCompanies()，用于：
// Now only returns the retrieved collection
getCompanies() {
return this.afs.collection<Company('companies').valueChanges();
}回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-16 07:59:57
this.companies设置在哪里？看起来您正在将它传递到过滤器中，但没有在任何地方设置它。
this.filteredCompanies = _.filter(this.companies, _.conforms(this.filters) )请注意，在上面的代码中，您正在使用this.companies作为筛选的源。如果没有设置，将不会有任何过滤的公司。
这段代码应该：
this.getCompanies().subscribe(() => {
this.applyFilters();
});也许是这样的？
this.getCompanies().subscribe(companies => {
this.companies = companies;
this.applyFilters();
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51867539
复制相关文章
相似问题