带有Ionic 3的JSON数据过滤器的搜索栏 [英] Searchbar with filter from JSON data with Ionic 3

问题描述

我想有一个搜索栏，可以根据书名过滤搜索结果，但我尝试这样做，但是不起作用.当我正在寻找东西时，什么也没有发生，没有错误，所以我错了，但是我不知道是什么，我是打字机的新手，我寻求帮助.预先感谢

I would like to have a search bar that filters the results based on the name of the book, I tried to do it but it does not work. When I'm looking for something, nothing happens, no mistake, so I'm wrong, but I do not know what, I'm new to typescript and I ask for help. Thanks in advance

这是我的page.html:

<ion-content padding>
    <ion-searchbar placeholder="Filter Items" (ionInput)="getItems($event)"></ion-searchbar>
    <ion-grid>
        <ion-row>
            <ion-col *ngFor="let item of items">
                <ion-card-header><h1>{{item.title}}</h1></ion-card-header>
                <ion-card-header><h3>Autore:{{item.author}}</h3></ion-card-header>
                <div id="immagine">
                    <img src="../assets/{{item.imageLink}}">
                </div>
            </ion-col>
        </ion-row>
    </ion-grid>   
</ion-content> 

这是我的page.ts文件:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable'
import 'rxjs/add/operator/map';

@IonicPage()
@Component({
  selector: 'page-tab2',
  templateUrl: 'tab2.html',
})
export class Tab2Page {
 items:any;


  constructor(public navCtrl: NavController, public navParams: NavParams, public http: HttpClient) {
this.loadData();

  }

  loadData(){
    let data:Observable<any>;
    data = this.http.get("assets/books.json");
    data.subscribe(result => {
      this.items = result;
      this.initiazileItems();
    })

   }

 initiazileItems(){
   this.items= this.items;
 }

 getItems(ev:any){
   this.initiazileItems();
   let val = ev.target.value;
 }

 filterItems(ev: any) {
    this.loadData();
    let val = ev.target.value;
    if (val && val.trim() != '') {
      this.items = this.items.filter((item) => {
        return (item.title.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  }
}

我的json示例:

{
    "author": "Hans Christian Andersen",
    "country": "Denmark",
    "imageLink": "images/fairy-tales.jpg",
    "language": "Danish",
    "link": "https://en.wikipedia.org/wiki/Fairy_Tales_Told_for_Children._First_Collection.\n",
    "pages": 784,
    "title": "Fairy tales",
    "year": 1836
},

推荐答案

将搜索栏更改为以下内容

Change the search bar to the following

  <ion-searchbar placeholder="Filter Items" [(ngModel)]="searchTerm" (ionInput)="filterItems()"></ion-searchbar>
<ion-grid>
        <ion-row>
            <ion-col *ngFor="let item of filterItems">
                <ion-card-header><h1>{{item.title}}</h1></ion-card-header>
                <ion-card-header><h3>Autore:{{item.author}}</h3></ion-card-header>
                <div id="immagine">
                    <img src="../assets/{{item.imageLink}}">
                </div>
            </ion-col>
        </ion-row>
    </ion-grid>   

然后在您的ts文件中添加以下内容:

Then in your ts file add this:

    searchTerm: string ;
    filterItems:any;
 loadData(){
    let data:Observable<any>;
    data = this.http.get("assets/books.json");
    data.subscribe(result => {
      this.items = result;
      this.filterItems= this.items;
    })

    filterItems(){
    this.filterItems = this.items.filter(item =>  item.title.toLowerCase().indexOf(this.searchTerm.toLowerCase()) > -1;
     )
    }

这篇关于带有Ionic 3的JSON数据过滤器的搜索栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！