<ion-searchbar> 在 <ion-header> Ionic 4 中不工作

Question

我正在使用 Ionic 4，我正在尝试在 header 中实现一个搜索栏，就像这样：

<ion-header>
  <ion-toolbar>
    <!-- Side menu button-->
    <ion-buttons slot="start">

      <button (click)="openFirst()"><img src="../../../assets/jas.png"></button>
    </ion-buttons>

    <ion-title><ion-searchbar ></ion-searchbar></ion-title>
  </ion-toolbar>
</ion-header>

我的问题是搜索栏显示了，但我不能在里面写任何东西。

此外，当它不在 <ion-title> 内时，它不起作用。

似乎它在应用程序的所有其他地方都有效

Answer 1

尝试如下操作，

<ion-header>
  <ion-toolbar>
    <ion-title>Enter Place</ion-title> 
    <ion-searchbar [(ngModel)]="autocomplete.query" [showCancelButton]="true" (ionInput)="updateSearch()" (ionCancel)="dismiss()"></ion-searchbar>
    <ion-searchbar [(ngModel)]="autocomplete.query" [showCancelButton]="true" (ionInput)="updateSearch()" (ionCancel)="dismiss()">
    </ion-searchbar>
  </ion-toolbar>
</ion-header>

Answer 2

试试这个：

<ion-header>
    <ion-buttons>
       <ion-title>`enter title here`</ion-title>
    </ion-buttons>
    <ion-searchbar></ion-searchbar>
</ion-header>

Answer 3

在 ionic 5 中，您可以执行以下操作：

<ion-header>
  <ion-tootlbar>
    <ion-title>My Title</ion-title>
  </ion-toolbar>
  <ion-searchbar></ion-searchbar>
</ion-header>

ion-toolbar 的每个新兄弟将显示为新行。

如果您尝试在 ion-content 内使用 collapse=condense，这也有效。

<ion-searchbar> 在 <ion-header> Ionic 4 中不工作

<ion-searchbar> is not working inside <ion-header> Ionic 4

ionic-framework

angular

ionic4