我如何使我的離子搜索欄（離子輸入）粘在頂部導航欄上 - IONIC

Question

簡要說明：我的html表格顯示了json api的列表和用於過濾列表的搜索 輸入框。

要求：我希望此搜索粘在上面。以下是我的task.html代碼。請指教

<!-- 
    Generated template for the TaskgivenPage page. 

    See http://ionicframework.com/docs/components/#navigation for more info on 
    Ionic pages and navigation. 
--> 
<ion-header> 

    <ion-navbar> 
    <button ion-button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title>taskgiven</ion-title> 

    </ion-navbar> 

</ion-header> 



<ion-content padding> 
    <ion-searchbar (ionInput)="getItems($event)" style="width:400px; float:right; "></ion-searchbar> 
    <ion-list *ngFor="let list of displayList;"> 

    <ion-item class="desc" (click)="ind(list)" >{{list.TASKDESC}} <br> 
     <p style="color:#d2dce1; margin-top:10px" >{{list.PRIMARY}}</p> 
     <p style="text-align:right; margin-top:-20px;" [style.color]="list.ENTDT > list.DEADLINE_DT ? 'red' : '#d2dce1'">{{list.DEADLINE_DT}}</p><hr> 

    </ion-item> 


    <!--<ion-item class="desc1" >{{list.PRIMARY}}</ion-item>--> 
    </ion-list> 

</ion-content> 

我想<ion-searchbar (ionInput)="getItems($event)" style="width:400px; float:right; "></ion-searchbar>被粘在上面

謝謝您的時間！

Answer 1

只需將您的搜索欄放入您的離子頭中即可。 You can find the working version here

<ion-header> 
    <ion-navbar> 
    <ion-title>Home</ion-title> 
    <ion-searchbar [(ngModel)]="searchTerm" (ionInput)="setFilteredItems()"></ion-searchbar> 
    </ion-navbar> 
</ion-header>