搜索栏与过滤器和来自JSON数据与离子2

Question

我很新的Typescript和离子2，我试图过滤槽与Ionic 2搜索栏的JSON响应。

这是我的代码：

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

} 

而且标记：

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

我这个错误，当我搜索：

item.toLowerCase不是一个函数

JSON数据是这样的：

[ 
{ 
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" 
] 
} 
] 

Answer 1

你得到的是错误的，因为每个项目不是字符串，而是一个对象，因此而不是做

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

你应该做

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

也请注意，在你看来，你正在使用的帖子阵列

*ngFor="let post of posts" 

但是，你应该使用项目阵列代替，因为这是将要被过滤

<ion-list> 
    <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'; 
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); 
     }) 
    } 
    } 

} 

Answer 2

，当我在角2曾与离子我都面临着同样的问题。

在我们的项目中，我们有一种方法可以通过使用* ngFor获取所有产品列表并显示项目。

每当我们使用离子搜索栏进行搜索时，输入搜索文本将通过使用“event.target.value”来获得。我们必须检查搜索文本是否与项目匹配。

守则，

getAllProdcuts(isFrom, searchText){ 
     this.toDoService.getAllProdcuts().then((res) => { 
     this.items = res; 
      if(isFrom == 'search') { 
       this.items = this.items.filter((item) => { 
        return (item.toLowerCase().indexOf(searchText.toLowerCase()) > -1); 
       }) 
      } 
     }, (err) => { 

     }); 
    } 

    getItems(ev: any) { 

    // 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.getAllProdcuts("search", val); 
    } 
    } 

在这里，我们可以从方法筛选项目。

谢谢。