ionic 4 / Angular - 离子输入 - 自定义清除输入按钮答案

【问题标题】：ionic 4 / Angular - ion-input - custom clear input buttonionic 4 / Angular - 离子输入 - 自定义清除输入按钮
【发布时间】：2019-12-14 03:52:17
【问题描述】：

我有一个搜索输入来显示项目列表。我想添加一个自定义清除输入按钮。 IE。我想替换 ion-input 中现有的 clearInput 以使用自定义按钮。

.ts:

inputText = '';

clearField() {
    this.inputText = '';
  }

.html

<div>
  <span (click)="clearField()">CLEAR</span>
   <ion-input (keyup)="filterList($event.target.value)" type="text" [ngModel]="inputText"></ion-input>
</div>

这不起作用，但离子输入 clearInput 确实起作用：/

【问题讨论】：

标签： angular ionic-framework

【解决方案1】：

如果您引用离子输入怎么办？

<div>
  <span (click)="refIonInput.clearField()">CLEAR</span>
   <ion-input #refIonInput (keyup)="filterList($event.target.value)" type="text" [ngModel]="inputText"> 
   </ion-input>
</div>

【讨论】：

太棒了，能够做到这一点：CLEAR