结合过滤帖子并加载更多帖子

Question

在Angular和Firestore中，如何将过滤器功能与加载功能结合起来？

用例：我最初只想加载最新的10个帖子。但我希望允许用户使用输入字段按标题后过滤。此过滤器应搜索所有帖子，而不仅仅是最新的10。

我如何从概念上实现这一目标？

• 如果我一次性加载所有来自Firestore的帖子，我可以轻松地在我的组件中使用post-title进行过滤（或者使用带有* ngFor的管道）。

• 但是，如果我只从Firestore加载部分帖子，那么以这种方式过滤显然只适用于那些已加载的帖子。因此，如果我搜索一个尚未加载的帖子的帖子标题，显然不会有用。

所以我假设我必须将我的过滤逻辑从前端移动到后端以某种方式。

我该怎么做？我是否必须在每次击键时都使用我的标题过滤器查询Firestore？

这是不是意味着我放弃了从加载一些数据到现在向后端提出数十个搜索查询所带来的任何潜在节省？因此，最初只需一次加载所有帖子，然后在前端执行过滤可能不是更好吗？

人们如何做到这一点？

Answer 1

假设您有这样的用户界面：

+----------------------------------------+
| Search: ______________________         |
+----------------------------------------+
|                                        |
|                                        |
|                                        |
...

然后我使用以下逻辑：

• 如果搜索为空，我会显示该集合中的前10个项目。
• 如果搜索有值，我会显示集合中与搜索字词匹配的前10个项目。

第二步确实要求应用程序的搜索选项符合Firestore的查询模型，我确保这一点。

通过这种方法，我总是可以获得最多10个项目（或者任何数量的项目合理地构成一个充满内容的屏幕）。