Ionic 5-单击重置按钮时清除搜索框文本

【问题标题】：Ionic 5-Clear the searchbox text when clicking the reset buttonIonic 5-单击重置按钮时清除搜索框文本
【发布时间】：2021-01-05 12:36:00
【问题描述】：

我正在使用 ionic 5 ..我有一个 ionsearch 来搜索列表中的内容。然后我有另一个重置按钮，同时按下这个重置按钮我希望清除在搜索栏中键入的 ionsearch 文本。请帮助我.

提前致谢

【问题讨论】：

标签： ionic-framework search ionic5

【解决方案1】：

你可以使用它的 ionClear 事件来做任何你想做的事情，例如清除文本

(ionClear)="onClear($event)"

【讨论】：

【解决方案2】：

可以通过value属性设置ion-searchbar组件的内容：

document.querySelector('ion-searchbar').value = '';

这也会自动调用ionInput 事件。

【讨论】：

【解决方案3】：

you can use [(ngModel)]="searchData" click on button call function and clear 'searchData'.

For eg. 
/** html code */
<ion-searchbar placeholder="Search users" [debounce]="250" mode="ios" [(ngModel)]="searchData"></ion-searchbar>

<ion-button mode="ios" expand="block" color="carnation" (click)="clearSearch()">
          Clear
</ion-button>

/**
typescript code
*/
public searchData:string ='';

clearSearch(){
  this.searchData = '';
}

【讨论】：