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

你做错了。

你做return this.data.filter(...)。它对你没影响原点数组（this.data）。它只返回一个新数组，不会对this.data进行更改。请参阅过滤器function doc
如果您想更改数据，则需要添加：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中的filterData：

<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。

Answer 3

使用CLI命令创建管道并复制以下代码

transform(names: any[], terms: string): any[] {
if(!names) return [];
if(!terms) return names;
terms = terms.toLowerCase();
return names.filter( it => {
  return it.name.toLowerCase().includes(terms);
});

}

有关更多信息，https://androiddhina.blogspot.com/2019/03/ionic-4-search-filter-using-pipe.html

如何在Ionic中实现搜索和过滤

3 个答案: