如何过滤来自 Firestore 数据库的数据

Question

我想在我的代码上实现这个过滤，但我在实现它时遇到了问题。

我在实现这行代码时出错：

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 => {”行的搜索功能吗

Answer 1

您不会将 observable 全部返回到async管道中。您正在执行手动订阅并映射结果。filterFunction() {&nbsp; this.countries = this.filter.valueChanges.pipe(&nbsp; &nbsp; startWith(''),&nbsp; &nbsp; switchMap(text => this.search(text))&nbsp; );}search(text: string): Observable<any[]> {&nbsp; return this.sampleFunction().pipe(&nbsp; &nbsp; map(countries => {&nbsp; &nbsp; &nbsp; return countries.filter(country => {&nbsp; &nbsp; &nbsp; &nbsp; const term = text.toLowerCase();&nbsp; &nbsp; &nbsp; &nbsp; return country.caseID.toLowerCase().includes(term)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; || (country.word).toLowerCase().includes(term)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; || (country.product).toLowerCase().includes(term);&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });&nbsp; );}sampleFunction(): Observable<any[]> {&nbsp; return this.extractorService.dbFirestore().pipe(&nbsp; &nbsp; map(data => data.map(x => x.payload.doc.data()))&nbsp; );}我建议尽可能向函数添加返回类型，Typescript 非常擅长发现像这样的基于类型的小错误。现在的一个潜在问题是this.extractorService.dbFirestore()每次过滤器值更改时都会调用它。如果你不希望这种情况发生，你需要一种不同的方法。处理静态数据您可能只想先加载数据，然后过滤固定数组。在这种情况下，您将首先加载数据，然后将值更改与concatMap.filteredCountries$: Observable<any[]>;private countries: any[];filterFunction() {&nbsp; // load the countries first&nbsp; this.filteredCountries$ = this.getCountries().pipe(&nbsp; &nbsp; // set the countries&nbsp; &nbsp; tap(countries => this.countries = countries),&nbsp; &nbsp; // now start observing the filter changes&nbsp; &nbsp; concatMap(countries => {&nbsp; &nbsp; &nbsp; return this.filter.valueChanges.pipe(&nbsp; &nbsp; &nbsp; &nbsp; startWith(''),&nbsp; &nbsp; &nbsp; &nbsp; map(text => this.search(text))&nbsp; &nbsp; })&nbsp; );}search(text: string): any[] {&nbsp; return countries.filter(country => {&nbsp; &nbsp; const term = text.toLowerCase();&nbsp; &nbsp; return country.caseID.toLowerCase().includes(term)&nbsp; &nbsp; &nbsp; || (country.word).toLowerCase().includes(term)&nbsp; &nbsp; &nbsp; || (country.product).toLowerCase().includes(term);&nbsp; });}getCountries(): Observable<any[]> {&nbsp; return this.extractorService.dbFirestore().pipe(&nbsp; &nbsp; map(data => data.map(x => x.payload.doc.data()))&nbsp; );}然后您的 HTML 将被观看filteredCountries$而不是countries.<tr *ngFor="let item of filteredCountries$ | async">