Ionic 4 - 如何以编程方式清除离子搜索栏？答案

【问题标题】：Ionic 4 - How can I programmatically clear ion-searchbar?Ionic 4 - 如何以编程方式清除离子搜索栏？
【发布时间】：2020-03-13 03:35:06
【问题描述】：

我在 Ionic 4 上使用 ion-searchbar。

如果用户单击任何其他按钮（不是取消按钮），我想知道如何清除内容。

<ion-searchbar id="name_of_searchbar" animated placeholder='search' (ionChange)="buscar($event)">
</ion-searchbar>

在函数（任何其他按钮）中，我尝试使用：document.getElementById ("name_of_searchbar")。 innerHTML = "";

虽然它修改了内容，但它也删除了 ion-searchBar

谢谢！

【问题讨论】：

在搜索栏中添加 [(ngModel)]="searchValue" 并在 ts 文件中声明此变量，并在按钮中希望用户使用清除文本，在按钮内单击 this.searchValue = "";
谢谢，完美！
@Guille 如果这对你有用。关闭问题。目前尚不清楚是否找到了解决方案，我建议 Mostafa Harb 回答问题并接受。
我添加了一个回答伙伴。
如何关闭？

标签： ionic4

【解决方案1】：

在搜索栏中添加 [(ngModel)]="searchValue"

<ion-searchbar [(ngModel)]="searchValue"  animated placeholder='search' (ionChange)="buscar($event)">
</ion-searchbar>

在ts文件中：

export class PageName {
searchValue:string;
constructor(){}

clearSearch(){
    this.searchValue = "";
}
}

在您希望用户清除文本的按钮中，放入按钮单击示例：

<ion-button color="primary" (click)="clearSearch()">empty search</ion-button>

【讨论】：