Ionen-Inhalt überlappt Ion-Header bei der Verwendung von Textbox-Autocomplete mit ionic3 - ionic-framework, ionic3

Wir haben eine Listenseite und eine Filterseite in ionicApp Die Filterseite verfügt über eine Textbox - Autocomplete und Dropdown. Wenn versucht wird, mit Textbox-Autocomplete-Ionen-Inhalt zu filtern, geht dies in ion-header wie in den folgenden Snapshots gezeigt.

Textfeld-Autovervollständigen html:

<input type="text" [(ngModel)]="selectedTitle" (input)="getTitles($event)" placeholder="search titles" />
<ion-list *ngFor="let title of titles">
<ion-item tappable (click)=selectTitle(title.VNAME)>
{{title.VNAME}}
</ion-item>
</ion-list>

Ich habe filter.html und testPage.html in diesem Plunker gesetzt https://plnkr.co/edit/FASHAxUAJwcz9XYeKDqj?p=catalogue

Ionen-Info:

    @ionic/cli-utils  : 1.14.0
ionic (Ionic CLI) : 3.14.0
global packages:
cordova (Cordova CLI) : 7.0.1
local packages:
@ionic/app-scripts : 3.0.1
Cordova Platforms  : android 6.2.3
Ionic Framework    : ionic-angular 3.7.1
System:
Node : v6.9.5
npm  : 3.10.10
OS   : Windows 10
Misc:
backend : legacy

Dieses Problem tritt auf, wenn die neueste Version von Ionic Info verwendet wird, mit der alten Version funktioniert es gut.

@ionic/cli-utils  : 1.9.1
ionic (Ionic CLI) : 3.9.1
global packages:
Cordova CLI : 7.0.1
local packages:
@ionic/app-scripts : 1.3.3
Cordova Platforms  : android 6.2.3
Ionic Framework    : ionic-angular 3.5.3
System:
Node : v6.9.5
npm  : 3.10.10
OS   : Windows 10

Kann uns bitte jemand helfen, dieses Problem zu lösen?

Antworten:

Ich habe die Lösung gefunden, indem ich den Inhalt der Ionen mit dem folgenden Code ändere:

   import { Component,ViewChild } from "@angular/core";
import { Content } from "ionic-angular";

export class TestPage {

@ViewChild(Content) content: Content;

......
Events.subscribe("applyFilter", (data) => {
this.content.resize();
}