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

Question

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

我在执行这行代码时出错：

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，当我尝试 put/replace 我的函数时出现错误。我收到此错误“属性 '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

您没有 return 一直观察到 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()))
  );
}

我建议尽可能向函数添加 return 类型，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">

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

How to Filter Data coming from Firestore Database

javascript

firebase

angularfire2

angular

google-cloud-firestore

使用静态数据