web-dev-qa-db-ja.com

フィルター付きの検索バーおよびIonic 2のJSONデータから

私はTypeScriptとIonic 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"
]
}
]
angulartypescriptionic-frameworkionic2ionic3
7
olivier

各itemは文字列ではなくオブジェクトであるため、このエラーが発生します。

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>

その上、データが利用可能なときにユーザーがページonlyを使用できることを確認するために、少し異なることを行います（取得するために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);
      })
    }
  }

}
23
sebaferreras

イオンでangular 2で作業したときに直面したのと同じ問題。

このプロジェクトでは、* ngForを使用してすべての製品リストを取得し、アイテムを表示する1つの方法があります。

ionic検索バーを使用して検索を行う場合は常に、「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);
    }
  }

ここでは、メソッドからフィルター処理されたアイテムを取得できます。

ありがとう。

0
Ponmurugan Mohanraj