angular2 + ionic2 검색 필터

Question

ionic2 + angular2로 검색 기능을 구현하고 싶습니다. 이전 버전에서는 This Filter Example 을 사용했으나 최신 버전에서는 작동하지 않습니다.

어떻게 angular2 + ionic2와 작동합니까?

Answer 1

Searchbar component을 사용할 수 있습니다. 이 working plunker을 살펴보십시오.

처음에는 Component에서보기에 표시 할 항목 목록이 있어야합니다.

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

@Component({ 
    templateUrl:"home.html" 
}) 
export class HomePage { 

    constructor() { 
    this.initializeItems(); 
    } 

    initializeItems() { 
    this.items = [ 
     'Amsterdam', 
     'Bogota', 
     'Buenos Aires', 
     'Dhaka' 
    ]; 
    } 

    getItems(ev) { 
    // 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); 
     }) 
    } 
    } 
} 

그냥 당신이 코드에서, 마법이 코드 줄에서 수행되고 볼 수 좋아한다 : 포함하는 우리는 항목을 필터링, 그래서 매번 당신이 뭔가를 입력

// 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); 
    }) 
} 

을 당신에게 ' ve 검색 막대에 입력 한. 그런 다음보기에서이 코드를 추가

<ion-header> 
    <ion-navbar primary> 
    <ion-title> 
     Ionic 2 
    </ion-title> 
    </ion-navbar> 
</ion-header> 
<ion-content> 
    <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar> 
    <ion-list> 
    <ion-item *ngFor="let item of items"> 
     {{ item }} 
    </ion-item> 
    </ion-list> 

</ion-content> 

우리가 수행하여 getItems 방법에 ion-searchbar 요소에서 ionInput 이벤트를 바인딩하고 통지하십시오 :

(ionInput)="getItems($event)