Панель поиска с фильтром из данных JSON с помощью Ionic 3 - PullRequest
Новая
       25

Панель поиска с фильтром из данных JSON с помощью Ionic 3

0 голосов
/ 10 июня 2018

Я хотел бы иметь панель поиска, которая фильтрует результаты по названию книги, я пытался это сделать, но она не работает.Когда я что-то ищу, ничего не происходит, нет ошибок, поэтому я ошибаюсь, но я не знаю, что, я новичок в машинописи и прошу помощи.Заранее спасибо

это мой 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
},

1 Ответ

0 голосов
/ 10 июня 2018

Измените строку поиска на следующее 

  <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 добавьте следующее: 

    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;
     )
    }
...