javascript - 如何过滤来自 Firestore 数据库的数据
问题描述
我想在我的代码上实现这个过滤,但我在实现它时遇到了问题。
我在实现这行代码时出错:
function search(text: string, pipe: PipeTransform): Country[] {
return COUNTRIES.filter(country => {
const term = text.toLowerCase();
return country.name.toLowerCase().includes(term)
|| pipe.transform(country.area).includes(term)
|| pipe.transform(country.population).includes(term);
});
}
我无法更改COUNTRIES.filter,当我尝试在其上放置/替换我的函数时出现错误。我收到此错误“ 'void'类型上不存在属性'过滤器' ”
这是我的代码。
export class MyComponent implements OnInit {
countries: Observable<any[]>;
filter = new FormControl('');
listQuestions = [];
constructor(private extractorService: ExtractorService,
private fstore: AngularFirestore) { }
ngOnInit() {
this.filterFunction();
}
filterFunction(){
this.countries = this.filter.valueChanges.pipe(
startWith(''),
map(text => this.search(text))
);
}
search(text: string): any[] {
return this.sampleFunction().filter(country => {
const term = text.toLowerCase();
return country.caseID.toLowerCase().includes(term)
|| (country.word).toLowerCase().includes(term)
|| (country.product).toLowerCase().includes(term);
});
}
sampleFunction() {
this.extractorService.dbFirestore().subscribe(data => {
this.listQuestions = data.map(x => {
return x.payload.doc.data();
})
})
}
我可以从我的sampleFunction()获取来自 firebase 的所有数据。
顺便说一句,我使用以下代码在 html 上加载数据:
<tr *ngFor="let item of countries | async">
您能帮我将我在sampleFunction()上获得的数据用于指南使用“ return COUNTRIES.filter(country => {
”行的搜索功能吗
解决方案
您不会将 observable 全部返回到async
管道中。您正在执行手动订阅并映射结果。
filterFunction() {
this.countries = this.filter.valueChanges.pipe(
startWith(''),
switchMap(text => this.search(text))
);
}
search(text: string): Observable<any[]> {
return this.sampleFunction().pipe(
map(countries => {
return countries.filter(country => {
const term = text.toLowerCase();
return country.caseID.toLowerCase().includes(term)
|| (country.word).toLowerCase().includes(term)
|| (country.product).toLowerCase().includes(term);
});
});
);
}
sampleFunction(): Observable<any[]> {
return this.extractorService.dbFirestore().pipe(
map(data => data.map(x => x.payload.doc.data()))
);
}
我建议尽可能向函数添加返回类型,Typescript 非常擅长发现像这样的基于类型的小错误。
现在的一个潜在问题是this.extractorService.dbFirestore()
每次过滤器值更改时都会调用它。如果你不希望这种情况发生,你需要一种不同的方法。
处理静态数据
您可能只想先加载数据,然后过滤固定数组。在这种情况下,您将首先加载数据,然后将值更改与concatMap
.
filteredCountries$: Observable<any[]>;
private countries: any[];
filterFunction() {
// load the countries first
this.filteredCountries$ = this.getCountries().pipe(
// set the countries
tap(countries => this.countries = countries),
// now start observing the filter changes
concatMap(countries => {
return this.filter.valueChanges.pipe(
startWith(''),
map(text => this.search(text))
})
);
}
search(text: string): any[] {
return countries.filter(country => {
const term = text.toLowerCase();
return country.caseID.toLowerCase().includes(term)
|| (country.word).toLowerCase().includes(term)
|| (country.product).toLowerCase().includes(term);
});
}
getCountries(): Observable<any[]> {
return this.extractorService.dbFirestore().pipe(
map(data => data.map(x => x.payload.doc.data()))
);
}
然后您的 HTML 将被观看filteredCountries$
而不是countries
.
<tr *ngFor="let item of filteredCountries$ | async">
推荐阅读
- javascript - 如何使用javascript在plotly中旋转数据点的文本标签
- python - 如何使用 Pydantic 为一个字段定义两个值类型
- c++ - 为什么 std::get 只有两个 range::subrange 函数重载?
- python - 有没有办法使用 sqlite3 Python3.x 模块从数据库中提取整数?
- sql - 从现有列计算的 Oracle SQL 返回列
- node.js - 向 React&Node.js 项目添加 CRUD 方法
- python - 尝试创建语音识别游戏时出现回调错误
- r - 在函数 sn 库 psn 函数中使用多个参数进行变异
- c# - 具有额外配置的导航属性的模型派生类
- vue.js - Vue 3组合Api:V-For循环不访问数据