Ionic - 在搜索欄下搜索結果

Question

我正在使用Ionic和Angular創建一個購物清單應用程序。我給出的設計需要一個搜索欄，並在點擊按鈕後顯示結果。這些結果是直接位於搜索欄下方並覆蓋頁面內容的另一個列表。

樣機

Before clicking button to show search

Desired look after clicking button to show search

到目前爲止，這是代碼：

<ion-content padding> 

    <ion-grid> 
    <ion-row> 
     <ion-searchbar *ngIf="isOn"></ion-searchbar> 
     <ion-list> 
     <ion-item *ngFor="let searchresult of searchresults" (click)="selectresult(result)"> 
      {{ result.$value }} 
     </ion-item> 
     </ion-list> 
     <ion-col> 
     </ion-col> 
     <ion-col> 
     </ion-col> 
     <ion-col> 
     <ion-buttons end> 
      <button *ngIf="!isOn" (click)="showsearch()" ion-button small color="nudgetprim" end> 
      + Add Item 
      </button> 
     </ion-buttons> 
     </ion-col> 
    </ion-row> 
    </ion-grid> 

    <ion-item-group> 
    <ion-item-divider color="light">Items</ion-item-divider> 
    <ion-item *ngFor="let item of items | async" (click)="changestate(item)">{{item.$value}}</ion-item> 
    </ion-item-group> 

</ion-content> 

我認爲我可以做到這一點有：

<ion-list> 
    <ion-item *ngFor="let searchresult of searchresults" (click)="selectresult(result)"> 
     {{ result.$value }} 
    </ion-item> 
    </ion-list> 

但沒有成功。

現在，點擊按鈕後，搜索欄會正常顯示，我只需要找到一種方法，將列出的結果放在之前覆蓋之前顯示的內容的地方。我如何在Ionic中實現這種外觀？

Answer 1

初始化SearchResult所財產類：

searchresults: any[] = []; 

這似乎是不明確造成角忽略綁定屬性。

請提供您的.ts文件以供參考。