如何在Ionic中實現搜索和過濾

Question

我從本地存儲在項目中的JSON文件中獲取數據。 JSON字符串是位置的陣列，其結構是如下所示：

JSON文件

{ 
    "locations": [ 
     { 
      "title": "ABC", 
      "latitude": -1.2596551, 
      "longitude": 36.7066604, 
      "routes":["22","23","105","115"], 
      "fare":[], 
      "matatu":[] 
     }, 
     { 
      "title": "Adams Arcade", 
      "latitude": -1.3004204, 
      "longitude": 36.7770793, 
      "routes": ["2","4W","102","24","24C","111"], 
      "fare":[], 
      "matatu":[] 
     }, 
     { 
      "title":"Aga Khan Hospital", 
      "latitude":-1.2620125, 
      "longitude":36.8186399, 
      "routes":["11A","11F","106","107","116"], 
      "fare":[], 
      "matatu":[] 
     } 
    ] 
} 

而不是濾波在具有管飛中的數據，我在provider實現的功能來處理這個問題。下面的代碼：

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import 'rxjs/add/operator/map'; 
import { Geolocation } from '@ionic-native/geolocation'; 

@Injectable() 
export class LocationProvider { 

    data: any; 

    constructor(public http: Http, public geolocation: Geolocation) { 

    } 

    load(){ 

    if(this.data){ 
     return Promise.resolve(this.data); 
    } 

    return new Promise(resolve => { 
     this.http.get('assets/data/locations.json').map(res => res.json()).subscribe(data => { 
      this.data = this.applyHarvesine(data.locations); 
      this.data.sort((locationA, locationB) => { 
      return locationA.distance - locationB.distance; 
      }); 
      resolve(this.data); 
     }); 
    }); 

    } 

    filterLocations(searchTerm){ 
    return this.data.filter((location) => { 
     return location.title.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1; 
    }); 
    } 

} 

filterLocations()的功能是取searchTerm，並返回包含僅符合搜索條件的所述元素的數組。

以下是.ts和.html代碼，用於呈現它的頁面。

.TS

import { Component } from '@angular/core'; 
import { IonicPage, NavController } from 'ionic-angular'; 
import { LocationProvider } from '../../providers/location/location'; 
import { PlaceDetailsPage } from '../place-details/place-details'; 


@IonicPage() 
@Component({ 
    selector: 'page-places', 
    templateUrl: 'places.html', 
}) 
export class PlacesPage { 

    searchTerm: string = ''; 



    constructor(public navCtrl: NavController, public locations: LocationProvider) { 
    } 

    ionViewDidLoad() { 
    this.setFilteredLocations(); 
    } 

    setFilteredLocations(){ 
    return this.locations.filterLocations(this.searchTerm); 
    } 

} 

的.html

<ion-content> 
    <ion-searchbar [(ngModel)]="searchTerm" (ionInput)="setFilteredLocations()"></ion-searchbar> 
    <ion-list no-lines> 
     <button ion-item *ngFor="let location of locations.data"> 
      <ion-avatar item-left> 
       <ion-icon name="pin"></ion-icon> 
      </ion-avatar> 
      <h2>{{location.title}}</h2> 
      <p>{{location.distance}} km</p> 
     </button> 
    </ion-list> 
</ion-content> 

當在搜索欄用戶類型，setFilteredLocation()被稱爲觸發數據的濾波。問題是，沒有任何反應。

我哪裏出錯了？我的直覺是setFilteredLocation()函數中有什麼不對勁，但我不知道它是什麼。

是否有其他方法來搜索和過濾不涉及管道？

Answer 1

你做錯了。

1. 你這樣做return this.data.filter(...)。它對您的 原點陣列（this.data）沒有影響。它只是返回一個新的數組，並且不會更改爲this.data。查看過濾器function doc
2. 如果您想更改數據，您需要添加：this.data = this.data.filter(...)。但如果你這樣做，你會陷入其他錯誤。您的this.data將在過濾器後丟失一些元素，並且在重置過濾器時無法恢復。
   

所以，你應該做這樣的：
在您的組件：

allData = []; //Store all data from provider 
filterData = [];//Store filtered data 

ionViewDidEnter(){ 
    this.allData = this.locations.data; 
    this.filterData = this.allData; 
} 

setFilteredLocations(){ 
    this.filterData = this.allData.filter((location) => { 
     return location.title.toLowerCase().indexOf(this.searchTerm.toLowerCase()) > -1; 
    }); 
} 

而在你的模板ngFor使用篩選數據：

<button ion-item *ngFor="let location of filterData"> 

Answer 2

呦沒有發送$event在這裏。所以請嘗試如下所示。

的.html

<ion-searchbar [(ngModel)]="searchTerm" 
(ionInput)="setFilteredLocations($event)"></ion-searchbar> 

.TS

setFilteredLocations(ev: any){ 
    let val = ev.target.value; 

    if (val && val.trim() !== '') { 
     return this.locations.filterLocations(val); 
    } 

    } 

你可以看到official sample code here。