如何使用 ionic 4 中的搜索栏解决重复输出
How to solve duplicate output by using search bar in ionic 4
我正在使用 ionic 4。我想在我的应用程序中执行搜索功能。我正在使用搜索栏并从 API 获取结果。
我的问题是它总是输出重复的结果。
一个问题是我没有输入完成这个词它已经匹配了我要搜索的结果，然后它会输出结果。
另一个问题是当我完成输入时再次输出结果。
如何解决或避免这个问题？
这是我的 html 代码：
<ion-searchbar [(ngModel)]="name" (ionCancel)="onCancel($event)" (ionChange)="Search($event)"></ion-searchbar>
这是我的home.page.ts
Search() {
this.myService.getSearch(this.name);
}
第二个听起来好像您没有擦除 this.myService.getSearch 调用中的数据 - 检查它在那里做了什么，它是从一个新列表开始还是只是返回更多结果？如果这不能解决该问题，那么 post 该部分的代码。
第一个问题是设计使然。
您可以使用 debounce 选项减慢速度：
<ion-searchbar debounce="1500"></ion-searchbar>
您可以使用 ionChange 和 ionInput 试验两个输入事件 - 它们的行为不同，但我不记得确切的是哪个，您必须同时尝试它们。第三种选择是不处理它们，只使用提交按钮。
我正在使用 ionic 4。我想在我的应用程序中执行搜索功能。我正在使用搜索栏并从 API 获取结果。
我的问题是它总是输出重复的结果。
一个问题是我没有输入完成这个词它已经匹配了我要搜索的结果，然后它会输出结果。
另一个问题是当我完成输入时再次输出结果。
如何解决或避免这个问题？
这是我的 html 代码：
<ion-searchbar [(ngModel)]="name" (ionCancel)="onCancel($event)" (ionChange)="Search($event)"></ion-searchbar>
这是我的home.page.ts
Search() {
this.myService.getSearch(this.name);
}
第二个听起来好像您没有擦除 this.myService.getSearch 调用中的数据 - 检查它在那里做了什么，它是从一个新列表开始还是只是返回更多结果？如果这不能解决该问题，那么 post 该部分的代码。
第一个问题是设计使然。
您可以使用 debounce 选项减慢速度：
<ion-searchbar debounce="1500"></ion-searchbar>
您可以使用 ionChange 和 ionInput 试验两个输入事件 - 它们的行为不同，但我不记得确切的是哪个，您必须同时尝试它们。第三种选择是不处理它们，只使用提交按钮。