Question

这本来应该很容易，但是老实说，出于某种原因，这让我挠头。

基本上，我正在将数据从Firestore查询到我的主要组件中，并根据用户输入过滤这些数据。

问题是我的搜索功能位于另一个组件中，因此我将查询的数据作为组件属性传递给搜索组件，并试图根据用户的输入对其进行过滤。

例如，如果某个用户键入“ S”，则应显示所有以S开头的项目，然后，“ SP”将其范围缩小，依此类推。

我不确定这样做或创建另一个查询并直接从Firestore对其进行过滤是否是一个好主意。

我尝试做我正在做的事情的原因是因为它在读取时更便宜，而且我不必再次查询数据。

我查询数据的原始方法是这样的：

在我的search.ts

 initiateSearch() {
  if (this.searchTerm.length === 0) {
    this.queryResult = [];
    this.tempSearchStore = [];
  }
  const capitalizedsearchTerm = this.searchTerm.substring(0, 1).toUpperCase() + this.searchTerm.substring(1);
  if (this.queryResult.length === 0 && this.searchTerm.length === 1) {
    this.catService.searchCatalogs(this.searchTerm).then(snapShot => {
      snapShot.forEach(cat => {
        this.queryResult.push({ ...cat.data(), id: cat.id });
      });
      console.log('first', this.queryResult);
    });

  } else {
    this.tempSearchStore = [];
    this.queryResult.forEach(el => {
      if (el.name.startsWith(capitalizedsearchTerm)) {
        this.tempSearchStore.push(el);
      }
    });
    console.log('temp', this.tempSearchStore);
  }
}

和服务：

searchCats(searchFiled: string) {
    const reference = this.afs.collection('blabla');
    const query1 = reference.ref.where('searchKey', '==', 
    searchFiled.substring(0, 1).toUpperCase());
    return query1.get();
}

有什么建议吗？预先感谢。

Answer 1

如果您查询所有以'S'开头的字符串的文档，并且您有persistence enabled，则下一次查询以'SP'开头的字符串的文档将从缓存中获取结果。，因为您要查询的内容严格来说是您先前查询的内容的子集。在这种情况下，您无需为每个读物再次付费。

如何根据用户输入即时过滤对象数组

1 个答案: