在设备上键入时，离子搜索栏不会过滤

Question

我正在创建一个角度为5的离子3应用程序，而我正面临一个奇怪的问题。我有一个带有离子搜索栏的模态和一个约250项的离子列表。我使用与搜索栏的离子文档演示中相同的过滤器事件。

在浏览器中它可以很好地工作但是一旦它在手机上，在离子运行Android / ios上，列表不会刷新，直到我关闭键盘或触摸屏幕上的任何其他位置（导致键盘也要关闭，而不是在输入时过滤。

HTML文件

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>Choix du pays</ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="closeModal()">
        <ion-icon name="close"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
  <ion-toolbar color="primary">
    <ion-searchbar showCancelButton="true" (ionInput)="filterItems($event)"></ion-searchbar>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-list radio-group [(ngModel)]="selected_item">
    <ion-item *ngFor="let item of items">
      <ion-label>{{ item.name }}</ion-label>
      <ion-radio [value]="item.alpha3" (ionSelect)="selectedItem(item)"></ion-radio>
    </ion-item>

    <ion-item *ngIf="!data?.length">
      <h2>Aucun résultat</h2>
    </ion-item>

  </ion-list>
</ion-content>

并输入sript文件

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';


@IonicPage()
@Component({
  selector: 'page-choose-country',
  templateUrl: 'choose-country.html',
})
export class ChooseCountryPage {
  data;
  items: any;

  constructor(public navCtrl: NavController, public navParams: NavParams, private viewCtrl: ViewController) {
    this.data = this.navParams.get('data');
  }

  ngOnInit() {
    this.setItems();
  }

  setItems() {
    this.items = this.data;
  }

  filterItems(ev: any) {
    this.setItems();

    let val = ev.target.value;

    if (val && val.trim() !== '') {
      this.items = this.items.filter(function(item) {
        return item.name.toLowerCase().includes(val.toLowerCase());
      });
    }
  }

  closeModal() {
    this.viewCtrl.dismiss();
  }
  selectedItem(item) {
    this.viewCtrl.dismiss(item);
  }
}

你有什么想法吗？ 坦克上网！