在Angular 10中修改项目后，如何更新/重新加载搜索结果

Question

有人能告诉我如何在Angular 10中显示更新的搜索结果吗？

详细背景：该应用程序有一些过滤器来细化搜索结果，当用户单击"搜索"按钮时，多个结果将显示在网格布局中，并带有编辑选项。用户单击"编辑"按钮以更新特定记录。此编辑按钮打开一个可以进行修改的模式对话框。关闭模式对话框后，搜索结果仍然显示以前的数据，而不是更新的数据。我想知道如何在更新特定记录后自动刷新搜索结果(而无需再次单击"搜索"按钮(？如何实现此功能？非常感谢您的帮助。事先非常感谢。

注意：在这种情况下，搜索组件是父组件，编辑模式对话框是子组件。

问候SLS-

Answer 1

您可以在这里做两件事

1. 如果您正在连接后端数据库，则在更新数据后再次启动api
2. 将搜索结果数据存储在服务变量(Behavior主题(中，并在修改数据时更新该服务变量

Answer 2

正确的方法是再次调用API来刷新搜索结果，如@Saptarshi答案中所述。

然而，另一种快速而肮脏的方法是重新加载搜索结果组件。在父组件中：

HTML:

<ng-container *ngIf="showSearchResults">
<app-search-results></app-search-results>
</ng-container>

TS:

refreshSearchResults() {
this.showSearchResults = false
setTimeout(() => this.showSearchResults = true)
}

当您想要更新搜索结果时，只需调用refreshSearchResults即可。该代码之所以有效，是因为通过使*ngIf条件在瞬间为假，然后将其恢复为真，它将重新创建app-search-results组件，再次调用初始化代码所在的构造函数和ngOnInit，从而实质上用最新数据重新加载组件。

这是一个快速的胜利，不是最好的方法，但很高兴知道这个选项的存在。