Ionic 2 Ionensuchleiste showCancelButton funktioniert nicht in Android

Question

Ich verwende Ionic2.

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.3.0 
Ionic CLI Version: 2.1.18 
Ionic App Lib Version: 2.1.9 
Ionic App Scripts Version: 1.1.4 
ios-deploy version: Not installed 
ios-sim version: Not installed 
OS: macOS Sierra 
Node Version: v6.9.4 
Xcode version: Xcode 8.3 Build version 8E162 

kann ich nicht die ion-searchbar erhalten die Abbrechen mit showCancelButton Taste auf der Android-Plattform anzuzeigen.

<ion-searchbar [showCancelButton]="true" class="ion-searchtext" id="ion-searchtext" [(ngModel)]="searchQueryText" (change)="onChangeText($event)" (ionClear)="onCancelText($event)" (ionInput)="onInputText($event)" placeholder="Keyword Search" debounce="1"></ion-searchbar> 

iOS

Android

Das gleiche Problem wird here berichtet, aber es scheint noch nicht geklärt werden, und fragte mich, ob jemand eine Arbeit hat?

Dank

Answer 1

Die Schaltfläche Abbrechen ist die Zurück-Pfeil-Symbol auf der linken Seite des Eingabefeldes, es ziemlich verwirrend ist und hat mich anfangs auch, hier ist Demo habe ich erstellt, wo man sehen kann, es funktioniert:

<ion-toolbar> 
    <ion-searchbar 
     [(ngModel)]="searchString" 
     [showCancelButton]="showSearchCancelButton" 
     (ionInput)="searchStuff(searchString)" 
     (ionCancel)="onCancelSearch()"> 
    </ion-searchbar> 
    </ion-toolbar> 

Komponente:

... 
    onCancelSearch(): void { 
    alert('cancel clicked'); 
    } 
    ... 

DEMO

Answer 2

Es gibt keine "CancelButton" auf Android.

Sie können es selbst überprüfen auf: searchbar.ts auf dem offiziellen Repository.

/** 
    * @hidden 
    * Show the iOS Cancel button on focus, hide it offscreen otherwise 
    */ 
    positionCancelButton() { 
    if (!this._cancelButton || !this._cancelButton.nativeElement) { 
     return; 
    } 
    let showShowCancel = this._sbHasFocus; 
    if (showShowCancel !== this._isCancelVisible) { 
     let cancelStyleEle = this._cancelButton.nativeElement; 
     let cancelStyle = cancelStyleEle.style; 
     this._isCancelVisible = showShowCancel; 
     if (showShowCancel) { 
     cancelStyle.marginRight = '0'; 
     } else { 
     let offset = cancelStyleEle.offsetWidth; 
     if (offset > 0) { 
      cancelStyle.marginRight = -offset + 'px'; 
     } 
     } 
    } 
    } 

Android und IOS sind nicht ähnlich.