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

Вы получаете эту ошибку, потому что каждый элемент - это не строка, а объект, поэтому вместо выполнения

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

Ты должен сделать

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

Также обратите внимание, что, по вашему мнению, вы используете массив posts

*ngFor="let post of posts" 

Но вместо этого вам следует использовать массив items, потому что именно он будет отфильтрован.

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

}

С той же проблемой, с которой я столкнулся, когда работал в angular 2 с ionic.

В нашем проекте у нас есть один метод для получения всего списка продуктов и отображения элементов с помощью * 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);
    }
  }

Здесь мы можем получить отфильтрованные элементы из метода.

Спасибо.!