时间戳

首页 > 解决方案 > 离子搜索栏有取消图标而不是取消文本 ionic 3

ionic-framework - 离子搜索栏有取消图标而不是取消文本 ionic 3

问题描述

我需要在离子搜索栏旁边有取消图标。现在我在离子搜索栏旁边有文本作为取消。文本如果由我提供，现在我想用图像替换文本。

<ion-searchbar  name="doSearch" (search)="doSearch($event)" [(ngModel)]="searchFilter" [showCancelButton]="true" cancelButtonText="Cancel" placeholder="Search" (ionCancel)="searchCancel($event)" (ionInput)="onInput($event)" (ionBlur)="onInputBlur()" (ionFocus)="onInputFocus()" (ionClear)="onInputClear($event)" >

我试图删除取消按钮，并尝试获取元素并插入类名。

  var element = document.getElementById(".searchbar-ios .searchbar-ios-cancel .button-inner");
  element.classList.add("fa fa-angle-down fa-2x down-arrow");

它抛出一个错误说明TypeError: null is not an object (evaluating 'element.classList')

你能告诉我在离子搜索栏中获取取消图标而不是取消文本吗？

标签： ionic-frameworkionic2ionic3

解决方案

[showCancelButton]="true" cancelButtonText="Cancel"从中删除ion-searchbar。默认情况下，您将获得删除图标按钮。

推荐阅读