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

Question

在 Angular 和 Firestore 中，如何最好地将 filter 功能与 load-more 功能结合起来？

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

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

• 如果我一次性从 Firestore 加载 所有 帖子，我可以轻松地按组件中的帖子标题过滤（或使用带有 *ngFor 的管道）。

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

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

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

这是否意味着我失去了从仅加载一些数据到现在向后端进行数十次搜索查询所获得的任何潜在节省？因此，最初一次加载所有帖子，然后在前端执行过滤可能不是更好吗？

人们如何做到这一点？

Answer 1

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

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

然后我使用以下逻辑：

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

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

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