带有 JSON 数据的 Ionic 3 搜索栏

Question

有人请帮助我。我正在尝试过滤 JSON 数据，但它不起作用，也没有显示错误。

我已阅读 ionic 文档，但它仅适用于数组数据。

这是我的 ts 文件

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
//untuk membaca file json
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

//navigasi ke tampilPage
import { TampilPage } from '../tampil/tampil';

//panggil provider
import { AlQuranProvider } from '../../providers/al-quran/al-quran';
@Component({
  selector: 'page-al-quran',
  templateUrl: 'al-quran.html',
})
export class AlQuranPage {
  searchQuery: string = '';
  public alquranTerfilter: string[];
  
  constructor(
    private quranProvider: AlQuranProvider, 
    private http: Http, 
    public navCtrl: NavController, 
    public navParams: NavParams) {
      
    }

  ionViewDidLoad(){
    this.quranInitializeItems();
  }

  quranInitializeItems(){
    this.quranProvider.getQuran().subscribe(
      (respon) => { 
        //this.alquran = respon;
        this.alquranTerfilter = respon;
       });
  }

  getItems(ev: any) {
    // Reset items back to all of the items
    this.quranInitializeItems();

    // set val to the value of the searchbar
    var val = ev.target.value;

    // if the value is an empty string don't filter the items
    if (val && val.trim() != '') {
      this.alquranTerfilter = this.alquranTerfilter.filter((item) => {
       return (item.toString().toLowerCase().indexOf(val.toString().toLowerCase()) > -1);
     })
   }


  }

  tampilkan(item){
    this.navCtrl.push(TampilPage, {item: item});
  }
}

//this.alquran = respon;
/*
    if (val && val.trim() != '') {
       this.alquranTerfilter = this.alquranTerfilter.filter((item) => {
        return (item.toString().toLowerCase().indexOf(val.toString().toLowerCase()) > -1);
      })
    }

*/

<!--
  Generated template for the AlQuranPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>AlQuran</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

  <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>

  <ion-list>
    <ion-item *ngFor="let item of alquranTerfilter" (click)="tampilkan(item)">
      <h2>{{item.judul}}</h2>
      <h4>{{item.riwayat}}</h4>
      <ion-icon name="arrow-forward" item-end></ion-icon>
    </ion-item>
  </ion-list>
</ion-content>

这是提供者

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
/*
  Generated class for the AlQuranProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class AlQuranProvider {
 // public alquran: string[];
  //public alquranTerfilter: string[];
  constructor(public http: HttpClient, private httpnonclient: Http) {
  
  }

  getQuran(){
    return this.httpnonclient.get('./assets/nash/tbQuran.json')
      .map(respon => respon.json());
  }


}

过滤器不起作用，也没有显示任何错误。

抱歉我的英语不好。

Answer 1

我猜这是搜索功能吧？试试这个

getItems(ev: any) {

  this.quranInitializeItems();

  var val = ev.target.value;

  if (val && val.trim()) {
    this.alquranTerfilter = this.alquranTerfilter.filter(
      item => item.toString().toLowerCase().includes(val.toString().toLowerCase())
    )
  } else {
    return [];
  }
}

我没有得到您的过滤器逻辑，并且您忘记返回某些内容以防您的查询为空。