angular - 使用 ngrx/store angular 2 实现搜索

标签 angular search ngrx-store ngrx-effects

我正在尝试为用 Angular 4 编写的应用程序实现搜索功能。它基本上是针对显示大量数据的表格。我还添加了 ngrx 商店。 在商店中搜索应用程序的正确方法是什么? 目前,我每次都在为搜索查询清空存储,然后用从后端异步调用收到的数据填充它。然后我在 HTML 中显示这些数据。异步调用是从效果文件进行的。

最佳答案

我最近使用 Angular 4 和@ngrx 实现了一个搜索功能。 我这样做的方法是分派(dispatch)一个 EXECUTE_SEARCH 操作以将查询字符串设置到您的商店并触发效果。效果触发了异步调用。当异步调用返回时,我根据结果调度了 FETCH_SUCCESSFUL 操作或 FETCH_FAILURE 操作。如果成功,我会在我的商店中设置结果。

当您清除存储中的结果时,实际上取决于所需的行为。在我的项目中,我清除了 FETCH_SUCCESSFUL 上的结果,替换了旧结果。在其他用例中,当您执行新搜索时(在 EXECUTE_SEARCH reducer 中)从存储中清除结果可能是合理的。

关于angular - 使用 ngrx/store angular 2 实现搜索,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46199432/

相关文章:

javascript - @Ngrx/存储 : how to query models with relationships

html - 根据屏幕尺寸更改面板尺寸

algorithm - 这个循环不变量及其非正式证明是否正确? (CLRS 第三版练习 2-1-3)

Angular:样式 scss 上的全局变量在所有组件之间共享

search - 将旧网站转移到新框架网站并托管后如何修复谷歌搜索引擎优化?

JavaScript 表单到搜索引擎重定向

angular - Ngrx 一次分派(dispatch)一个 Action 多次

angular - 在集合 "store"中找不到示意图 "@schematics/angular"

javascript - 我如何像 React 一样在 Angular 2+ 中传递 Prop ?

jquery - 你应该在 Angular 2 项目中使用 jquery