Question

我想有一个搜索栏根据书名来过滤结果，我试着这样做，但它不起作用。当我在寻找什么东西时，没有任何事情发生，没有错误，所以我错了，但我不知道是什么，我是打字稿的新手，我寻求帮助。提前致谢

这是我的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
},

Answer 1

将搜索栏更改为以下

FB.api(
  '/me/picture',
  'GET',
  {},
  function(response) {
      document.getElementById('status').innerHTML = "<img src=" +response.data.url+ ">";
  }
);

然后在你的ts文件中添加：

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

带有Ionic 3的JSON数据过滤器的搜索栏

1 个答案: