如何在離子2應用程序中點擊並查看搜索欄

Question

如何在離子2應用程序中對點擊和查看搜索欄進行編碼。在那一個搜索圖標只顯示第一，當我點擊搜索欄將顯示搜索圖標。

Answer 1

TS

export class Page1{ 
    public toggled: boolean = false; 

    constructor() { 
     this.toggled = false; 
    } 

    public toggle(): void { 
     this.toggled = this.toggled ? false : true; 
    } 
} 

HTML

<div> 
    <ion-icon *ngIf="!toggled" (click)="toggle()" name="search"></ion-icon> 
    <ion-searchbar 
     *ngIf="toggled" 
     [(ngModel)]="someValue" 
     (ionInput)="searchThis($event)" 
     (ionCancel)="cancelSearch($event)" 
     (ionClear) = "cancelSearch($event)" 
     [showCancelButton]="true"> 
    </ion-searchbar> 
</div> 

在你cancelSearch()你可以叫this.toggle()再次顯示圖標。

Answer 2

我覺得@ Ivaro18的答案是完美的。

我只是想補充一下我的例子，根據他的回答建立。

home.ts

import { Component } from '@angular/core'; 
import { NavController, NavParams } from 'ionic-angular'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 

    toggled: boolean; 
    searchTerm: String = ''; 
    items: string[]; 

    constructor(public navCtrl: NavController, public navParams: NavParams) { 
     this.toggled = false; 
     this.initializeItems();   
    } 

    ionViewDidLoad() { 
     console.log('ionViewDidLoad HomePage'); 
    } 

    toggleSearch() { 
     this.toggled = this.toggled ? false : true; 
    } 

    initializeItems() { 
     this.items = ['Amsterdam','Bogota','Mumbai','San José','Salvador']; 
    }  

    triggerInput(ev: any) { 
     // Reset items back to all of the items 
     this.initializeItems(); 
     // set val to the value of the searchbar 
     let val = ev.target.value; 
     // if the value is an empty string don't filter the items 
     if (val && val.trim() != '') { 
      this.items = this.items.filter((item) => { 
      return (item.toLowerCase().indexOf(val.toLowerCase()) > -1); 
      }) 
     } 
    } 
} 

home.html的

<ion-header> 
    <ion-navbar color="primary"> 
    <button *ngIf="!toggled" ion-button icon-only menuToggle><ion-icon name="menu"></ion-icon></button> 
    <!-- Title --> 
    <ion-title *ngIf="!toggled">In&iacute;cio</ion-title> 
    <!-- Search Bar --> 
    <ion-searchbar *ngIf="toggled" [(ngModel)]="searchTerm" [showCancelButton]="true" (ionCancel)="toggleSearch()" (ionInput)="triggerInput($event)"></ion-searchbar> 
    <!-- Search Icon -->  
    <ion-buttons end *ngIf="!toggled"> 
     <button ion-button icon-only (click)="toggleSearch()"><ion-icon name="search"></ion-icon></button> 
    </ion-buttons> 
    </ion-navbar> 
</ion-header> 

<ion-content padding> 

<ion-list> 
    <ion-item *ngFor="let item of items"> 
    {{ item }} 
    </ion-item> 
</ion-list> 
</ion-content> 

更多信息： 欲瞭解更多信息，請查看API docs。