検索ボックスでionic 2の検索アイコンを作成する方法

Question

私のリスト内のデータを検索するためにionic 2検索ボックスを使用しています。私の質問は、searchbarにある検索項目をクリックすると、その検索ボックスのデータをconsol.logに保存する方法です。

またはイオン入力をuning seachboxのようなデータをフィルタリングし、私はこの私のtsは

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


@Component({ 
    templateUrl: 'home.html', 
}) 

export class HomePage { 
private searchQuery: string = ''; 
    private items: string[]; 

    listitme:string= '' ; 

    constructor(private navCtrl: NavController) { 
    this.initializeItems(); 
    } 

    initializeItems() { 
    this.items = [ 
     'Harvey Burton', 
     'Barnett Crosby', 
     'Peck Brock', 
     'Rachel Robinson', 
     'Suzette Frazier', 
     'Bettie Maddox', 
     'Haley Bates', 
     'Tania Chandler', 
     'Woods Nicholson' 
    ] 
    } 

    getItems(ev: any) { 

    this.initializeItems(); 

    let val = ev.target.value; 

    if (val && val.trim() != '') { 
     this.items = this.items.filter((item) => { 
     return (item.toLowerCase().indexOf(val.toLowerCase()) > -1); 
     }) 
    } 
    } 

    setitem(item){ 
    this.listitme = item; 
    } 

} 

ファイル検索アイコン

をクリックしたときにデータをconsol.logする他の方法がありますあなたはreplで

が、これは私のhtml

<ion-header> 

    <ion-navbar> 
    <ion-title>search</ion-title> 
    </ion-navbar> 

    <ion-toolbar primary > 
    <ion-searchbar (ionInput)="getItems($event)" [(ngModel)]="listitme" ></ion-searchbar> 
    </ion-toolbar> 

</ion-header> 


<ion-content padding> 

<ion-list> 
    <ion-item *ngFor="let item of items"> 

    <div (click)=setitem(item) > 
     {{ item }} 
    </div> 

    </ion-item> 
</ion-list> 

</ion-content> 

Answer 1

であることを行うことができますボタンと入力で作られたカスタムバー用の検索バーコンポーネントの使用。こうすることで、ユーザーが検索アイコンをクリックしたときの状況を制御できます。あなたのコードで

コンポーネント

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

@Component({ 
    selector: 'page-home', 
    templateUrl: 'app/home.page.html' 
}) 
export class HomePage { 
private items: string[]; 

    query: string = ""; 
    listitme:string= '' ; 

    constructor(private navCtrl: NavController) { 
    this.initializeItems(); 
    } 

    initializeItems() { 
    this.items = [ 
     'Harvey Burton', 
     'Barnett Crosby', 
     'Peck Brock', 
     'Rachel Robinson', 
     'Suzette Frazier', 
     'Bettie Maddox', 
     'Haley Bates', 
     'Tania Chandler', 
     'Woods Nicholson' 
    ] 
    } 

    getItems() { 
    // Here you can add your console.log(...); 
    console.log('The search button has been clicked...'); 

    this.initializeItems(); 
    let val = this.query 
    if (val && val.trim() != '') { 
     this.items = this.items.filter((item) => { 
     return (item.toLowerCase().indexOf(val.toLowerCase()) > -1); 
     }) 
    } 
    } 

    setitem(item){ 
    this.listitme = item; 
    } 
} 

ビュー

<ion-header> 
    <ion-toolbar primary> 
    <ion-row> 
     <ion-col (click)="getItems()" width-10> 
     <button ion-button clear icon-only> 
      <ion-icon color="dark" name="search"></ion-icon> 
     </button> 
     </ion-col> 
     <ion-col width-90> 
     <ion-input [(ngModel)]="query" type="text" placeholder="Search..."></ion-input> 
     </ion-col> 
    </ion-row> 
    </ion-toolbar> 
</ion-header> 

<ion-content padding> 
<ion-list> 
    <ion-item *ngFor="let item of items"> 
    <div (click)=setitem(item) > 
     {{ item }} 
    </div> 
    </ion-item> 
</ion-list> 
</ion-content>