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

Question

我在 Ionic 4 上使用 ion-searchbar。

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

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

在函数（任何其他按钮）中，我尝试使用：document.getElementById（“name_of_searchbar”）。内部HTML = "";

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

谢谢！

标签： ionic4

Answer 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>