[英]How to limit the offline data in cache of your browser coming from firestore
[英]How to Filter Data coming from Firestore Database
我想在我的代碼上實現這個過濾,但我在實現它時遇到了問題。
我在實現這行代碼時出錯:
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 ,當我嘗試在其上放置/替換我的函數時出現錯誤。 我收到此錯誤“屬性 '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 => {
”
您並沒有將可觀察對象全部返回到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">
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.