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> 

Ionic2を使用してアプリケーションを作成しようとしています。これは従業員のリストを表示する私のhome.htmlページです。私は削除して編集するオプションを持つ各項目にスライドオプションを追加しました。また、検索バーオプションも追加しました。しかしそれのどれも働いていないようです。助けてください。

Answer 1

以下のコードは、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>