Question

我正在使用Ionic和Angular创建一个购物清单应用程序。我给出的设计要求搜索栏在单击按钮后显示结果。这些结果是另一个直接位于搜索栏下方并覆盖页面内容的列表。

实体模型

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

在您的课程中初始化 searchresults 属性：

searchresults: any[] = [];

看来属性未定义导致Angular忽略绑定。

请提供您的.ts文件以供参考。

Ionic - 在搜索栏下搜索结果

1 个答案: