[英]searchbar, button and sliding options in ionic2 not working
<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頁面,其中顯示了員工列表。 我已為每個具有刪除和編輯選項的項目添加了一個滑動選項。 我還添加了搜索欄選項。 但是似乎所有這些都不起作用。 請幫忙。
下面的代碼顯示了使用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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.