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は検索バーに入力します。次に、あなたのビューでこのコードを追加します。

(ionInput)="getItems($event)