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

问题描述

我对 Typescript 和 Ionic 2 非常陌生，我正在尝试使用 Ionic 2 搜索栏过滤 json 响应.

这是我的代码:

从'@angular/core'导入{Component}；从'ionic-angular'导入{NavController}；从 '@angular/http' 导入 {Http}；导入 'rxjs/add/operator/map';@零件({templateUrl: 'build/pages/home/home.html'})导出类主页{职位:任何；私人搜索查询:字符串 = '';私人项目:字符串[]；构造函数(私有http:Http){this.initializeItems();this.http.get('https://domain.co/open.jsonp').map(res => res.json()).subscribe(data => {this.posts = 数据；控制台日志(this.posts)；});}初始化项目(){this.items = this.posts;}getItems(ev: 任何) {//将项目重置回所有项目this.initializeItems();//将 val 设置为搜索栏的值让 val = ev.target.value;//如果值为空字符串，则不过滤项目if (val && val.trim() != '') {this.items = this.items.filter((item) => {返回 (item.toLowerCase().indexOf(val.toLowerCase()) > -1);})}}}

和标记:

<ion-searchbar (ionInput)="getItems($event)" [debounce]="500" placeholder="Suchen..."></ion-searchbar></ion-header><离子含量><离子列表><ion-item *ngFor="让帖子发帖"><h1>{{post.storeName}}</h1></ion-item></ion-list></离子含量>

我搜索时出现这个错误:

<块引用>

item.toLowerCase 不是函数

JSON 数据如下所示:

<预><代码>[{storeName: "Avec Hauptbahnhof",地址链接:"",电话:[phone]"，图片: ""，描述: ""，关联: ""，营业时间: ["05.30 - 22:00","05.30 - 22:00","05.30 - 22:00","05.30 - 22:00","05.30 - 22:00","06.30 - 22:00",7.00 - 22.00"]},{storeName: "庄园",地址链接:"",电话:[phone]"，图片: ""，顾客: ""，描述: ""，关联: ""，营业时间: ["09.00 - 18.30","09.00 - 18.30","09.00 - 18.30","09.00 - 21:00","09.00 - 18.30","08.00 - 17.00","Geschlossen"]}]

解决方案

你得到这个错误是因为每个 item 不是一个字符串，而是一个对象，所以不要这样做

item.toLowerCase().indexOf(val.toLowerCase()) >-1

你应该这样做

item.storeName.toLowerCase().indexOf(val.toLowerCase()) >-1

另请注意，在您的视图中，您使用的是 posts 数组

*ngFor="让帖子发帖"

但是你应该使用 items 数组来代替，因为那是要被过滤的数组

 <离子列表><ion-item *ngFor="let item of items"><h1>{{item.storeName}}</h1></ion-item></ion-list>

<小时>

除此之外，我会做一些不同的事情，只是为了确保用户能够仅在数据可用时使用页面(因为您使用的是 http请求获取).为此，我会添加一个加载警报，并会在 http 请求完成后立即将其删除.从 Ionic2-beta.11 开始，您可以这样做:

import { Component } from '@angular/core';import { NavController, LoadingController } from 'ionic-angular';从'@angular/http' 导入 { Http };导入 'rxjs/add/operator/map';@零件({templateUrl: 'build/pages/home/home.html'})导出类主页{私人帖子:任何；//<- 我添加了 private 关键字私人搜索查询:字符串 = '';私人物品:任何；//<- items 属性现在与帖子的类型相同构造函数(私有http:Http，私有loadingCtrl:LoadingController){//this.initializeItems();<- 你不再需要这个了//显示加载信息让 loadingPopup = this.loadingCtrl.create({content: '正在加载帖子...'});this.http.get('https://domain.co/open.jsonp').map(res => res.json()).subscribe(data => {this.posts = 数据；this.initializeItems();//隐藏加载消息loadingPopup.dismiss();});}初始化项目(){this.items = this.posts;}getItems(ev: 任何) {//将项目重置回所有项目this.initializeItems();//将 val 设置为搜索栏的值让 val = ev.target.value;//如果值为空字符串，则不过滤项目if (val && val.trim() != '') {this.items = this.items.filter((item) => {返回 (item.storeName.toLowerCase().indexOf(val.toLowerCase()) > -1);})}}}

I'm very new to Typescript and Ionic 2 and I'm trying to filter trough a json response with Ionic 2 search bar.

This is my code:

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';



@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {

  posts: any;
  private searchQuery: string = '';
  private items: string[];
  constructor(private http: Http) {

    this.initializeItems();

    this.http.get('https://domain.co/open.jsonp').map(res => res.json()).subscribe(data => {
        this.posts = data;
        console.log(this.posts);

    });

  }

  initializeItems() {
    this.items = this.posts;
  }

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

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

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

}

And the Markup:

<ion-header>
  <ion-searchbar (ionInput)="getItems($event)" [debounce]="500" placeholder="Suchen..."></ion-searchbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item *ngFor="let post of posts">
      <h1>{{post.storeName}}</h1>
    </ion-item>
  </ion-list>
</ion-content>

I this error when I search:

item.toLowerCase is not a function

The JSON data looks like this:

[
{
storeName: "Avec Hauptbahnhof",
addressLink: "",
phone: "0326223902",
image: "",
description: "",
link: "",
openingHours: [
"05.30 - 22:00",
"05.30 - 22:00",
"05.30 - 22:00",
"05.30 - 22:00",
"05.30 - 22:00",
"06.30 - 22:00",
"7.00 - 22.00"
]
},
{
storeName: "Manor",
addressLink: "",
phone: "0326258699",
image: "",
customer: "",
description: "",
link: "",
openingHours: [
"09.00 - 18.30",
"09.00 - 18.30",
"09.00 - 18.30",
"09.00 - 21:00",
"09.00 - 18.30",
"08.00 - 17.00",
"Geschlossen"
]
}
]

解决方案

You're getting that error because each item is not a string, but an object, so instead of doing

item.toLowerCase().indexOf(val.toLowerCase()) > -1

You should do

item.storeName.toLowerCase().indexOf(val.toLowerCase()) > -1

Also please notice that in your view you're using the posts array

*ngFor="let post of posts" 

But you should use the items array instead, because that's the one that is going to be filtered

  <ion-list>
    <ion-item *ngFor="let item of items">
      <h1>{{item.storeName}}</h1>
    </ion-item>
  </ion-list>

---

Besides that, I'd do things a little bit different, just to make sure that the user is able to use the page only when the data is available (since you're using an http request to obtain it). In order to do so, I'd add a loading alert and would remove it as soon as the http request is done. As of Ionic2-beta.11, you could do that like this:

import { Component } from '@angular/core';
import { NavController, LoadingController } from 'ionic-angular';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';


@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {

  private posts: any; // <- I've added the private keyword 
  private searchQuery: string = '';
  private items: any; // <- items property is now of the same type as posts
  constructor(private http: Http, private loadingCtrl: LoadingController) {

    // this.initializeItems(); <- you don't need this anymore

    // Show the loading message
    let loadingPopup = this.loadingCtrl.create({
      content: 'Loading posts...'
    });

    this.http.get('https://domain.co/open.jsonp').map(res => res.json()).subscribe(data => {
        this.posts = data;
        this.initializeItems();

        // Hide the loading message
        loadingPopup.dismiss();
    });
  }

  initializeItems() {
    this.items = this.posts;
  }

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

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

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

}

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