ionic2中的搜索栏，按钮和滑动选项不起作用

Question

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

<ion-content padding>
    <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
    <ion-list>
        <ion-item-sliding *ngFor="let detail of details">
            <ion-item>
                <h2>{{detail.Fname}} {{detail.Lname}}</h2>
            </ion-item>

            <ion-item-options side="left" icon-left>
                <button ion-button color="primary" (click)="buttonClick(detail)">
                    <ion-icon name="clipboard"></ion-icon>
                    Edit
                </button>
                <button ion-button color="danger" (click)="deleteEmpDetail(detail)">
                    <ion-icon name="trash"></ion-icon>
                    Delete
                </button>
            </ion-item-options>
        </ion-item-sliding>
    </ion-list>

    <ion-tabs color="light">
        <ion-fab right bottom (click)="addEmployee()">
            <button ion-fab mini color="dark">
                <ion-icon name="add"></ion-icon>
            </button>
        </ion-fab>
    </ion-tabs>
</ion-content>

I am trying to create an app using Ionic2. This is my home.html page which shows the list of employees. I've added a sliding option to each item that has options to delete and edit. I've also added a search-bar option. But none of it seems to be not working. Please help.

Answer 1

Below code shows correct way to implement search bar and sliding option in list using ionic2.

<ion-header>
  <ion-navbar color="primary" no-border-bottom>
    <ion-buttons start>
      <button ion-button class="navBtnRight" (click)="dismiss()">
        <span color="light" showWhen="ios">Cancel</span>
        <ion-icon color="light" name="md-close" class="csBigIcon" showWhen="android,windows"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>
      Select Anyone
    </ion-title>
  </ion-navbar>
  <ion-toolbar color="primary" no-border-top>
    <ion-searchbar [(ngModel)]="searchQuery" (ionInput)="getItems($event)" placeholder="Search">
    </ion-searchbar>
  </ion-toolbar>
</ion-header>
<ion-content class="csGrayBackground">
  <ion-list>
    <ion-item-sliding *ngFor="let detail of details; let i = index;" class="new-list" #slidingItem>
      <a ion-item ion-item detail-push detail-none href="#" (click)="openViewModal(detail, i)">
        <h2>{{detail.Fname}} {{detail.Lname}}</h2>
      </a>
      <ion-item-options side="left">
        <button ion-button color="primary" (click)="buttonClick(detail)">
          <ion-icon name="clipboard"></ion-icon>
          Edit
        </button>
        <button ion-button color="danger" (click)="deleteEmpDetail(detail)">
          <ion-icon name="trash"></ion-icon>
          Delete
        </button>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
</ion-content>