<ion-searchbar>在<ion-header> Ionic 4内部不起作用

Question

我正在使用Ionic 4，并且正尝试在标题中实现搜索栏，如下所示：

<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

在 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 一起使用，这也适用。

Answer 3

尝试一下：

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