Ionic2 SearchBarの混乱、onCancel onCancelで発射した後にonInputが呼び出されました

Question

ionic2 SearchBarのチュートリアルに従ってフィルタ機能を操作しました。

質問は、onCancelとonClearを動作させる方法を理解できません。

手順： 1）検索バーにキーワードを入力します。それはonInputイベントを呼び出して、私はちょうどsearchItem.value

2を使用するチュートリアルとは異なりsearchItem.target.valueから値を取得する）今私は明確な「X」をクリックするか、[キャンセル]ボタンをしようとすると、それonClear/onCancelイベントを呼び出し、すぐ後にonInputイベントが続きます。この呼び出しでは、searchItem.target.valueが見つかりません。その結果、が未定義のになり、機能が無効になります。

誰でもこの仕組みの詳細を詳しく説明できますか？

Answer 1

iはonClearイベント伝播

import {Component} from '@angular/core'; 

    @Component({ 
     selector: 'my-search', 
     template: '<ion-toolbar primary><ion-searchbar (input)="onInput($event)" (ionClear)="onClear($event)"></ion-searchbar></ion-toolbar><ion-content><ion-list><ion-item *ngFor="let item of items">{{ item }}</ion-item></ion-list></ion-content>' 
    }) 
    export class HomePage { 

     items = []; 

     constructor() { 
      this.initializeItems(); 
     } 

     initializeItems() { 
      this.items = [ 
       'Angular 1.x', 
       'Angular 2', 
       'ReactJS', 
       'EmberJS', 
       'Meteor', 
       'Typescript', 
       'Dart', 
       'CoffeeScript' 
      ]; 
     } 

     onClear(ev) 
     { 
      this.initializeItems(); 
      ev.stopPropagation(); 
     } 

     onInput(ev) { 
      // Reset items back to all of the items 
      this.initializeItems(); 

      // set val to the value of the searchbar 
      var val = ev.target.value; 

      // if the value is an empty string don't filter the items 
      if (val && val.trim() != '') { 
       this.items = this.items.filter((item) => { 
        return (item.toLowerCase().indexOf(val.toLowerCase()) > -1); 
       }) 
      } 
     } 
    } 

を停止することによりionic2ためのチュートリアルサンプルでそれを固定しました