亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何過濾來自 Firestore 數據庫的數據

如何過濾來自 Firestore 數據庫的數據

繁花不似錦 2022-05-22 11:13:28
我想在我的代碼上實現這個過濾,但我在實現它時遇到了問題。我在實現這行代碼時出錯: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 => {”行的搜索功能嗎
查看完整描述

1 回答

?
一只斗牛犬

TA貢獻1784條經驗 獲得超2個贊

您不會將 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">


查看完整回答
反對 回復 2022-05-22
  • 1 回答
  • 0 關注
  • 131 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號