当使用带离子3的文本框自动完成时，离子含量与离子头重叠

Question

我们在离子应用中有一个列表页面和过滤器页面。过滤页面有一个文本框自动完成和下拉列表。尝试使用textbox-autocomplete过滤时，ion-content会进入ion-header内部，如下面的快照所示。

Textbox-Autocomplete 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>

我已将filter.html和testPage.html放入此plunker中 https://plnkr.co/edit/FASHAxUAJwcz9XYeKDqj?p=catalogue

离子信息：

    @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

使用最新版本的Ionic信息时会发生此问题，以下旧版本的工作正常。

@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

有人可以指导我们解决这个问题吗？

Answer 1

我通过使用以下代码调整离子含量来获得解决方案：

   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();
    }