<ion-searchbar>不在里面工作<ion-header>離子 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 的每個新兄弟都會顯示為一個新行。

如果您嘗試在離子內容內將它與 collapse=condense 一起使用，這也有效。

Answer 3

嘗試這個：

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