搜索欄與過濾器和來自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); 
    } 
    } 

在這裏，我們可以從方法篩選項目。

謝謝。