Ionic 3のJSONデータからの検索バー

Question

Ionic 3の新機能で、Ionic 3検索バーでjson応答をフィルタリングしようとしています。誰でも助けることができますか？私が検索したとき、私はこのエラーを取得する

<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar> 

    <ion-list> 

     <ion-item *ngFor="let p of publikasi"> 
      <h3>{{ p.judul_ind }} </h3> 
     </ion-item> 
    </ion-list> 

：

この

は私のコード

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import { PublikasiProvider} from '../../providers/publikasi/publikasi'; 

@Component({ 
    selector: 'page-publikasi', 
    templateUrl: 'publikasi.html' 
}) 
export class PublikasiPage { 
    private publikasi: any; 
    private errorMessage: string; 
    searchQuery: string = ''; 

    constructor(public navCtrl: NavController, public publikasiProvider: PublikasiProvider) { 
    } 

    ionViewDidLoad() { 
    this.getPublikasi(); 
    } 

    getPublikasi(){ 
    this.publikasiProvider.getPublikasi() 
     .subscribe(
      publikasi =>this.publikasi = publikasi, 
      error => this.errorMessage = <any>error 
     ); 
    } 

    getItems(ev: any) { 
    this.getPublikasi(); 
    let val = ev.target.value; 
    if (val && val.trim() != '') { 
     this.publikasi = this.publikasi.filter((item) => { 
     return (item.storeName.toLowerCase().indexOf(val.toLowerCase()) > -1); 
     }) 
     } 
    } 
} 

とマークアップで

未定義

のプロパティ 'toLowerCaseメソッド' を読み取ることができません

private publikasi: string[]; 

および追加：：へのあなたのpublikasiを変更するには

[{ 
    "judul_ind": "Distrik Batanta Utara Dalam Angka 2014", 
    "file_cover": "Distrik-Batanta-Utara-Dalam-Angka-2014.jpg", 
    "file_pdf": "Distrik-Batanta-Utara-Dalam-Angka-2014.pdf" 
    }] 

Answer 1

試し：JSONデータは次のようになります

public filteredPublikasi: string[]; 

その後

で

publikasi =>this.publikasi = publikasi 

を置き換えます

(publikasi) => { 
    for(var property in publikasi) { 
     this.publikasi.push(publikasi[property]); 
    } 
    this.filteredPublikasi = this.publikasi; 
} 

あなたのフィルタロジックは次のようになります：

this.filteredPublikasi = this.publikasi.filter((item) => { 
    return item.toLowerCase().indexOf(this.inputValue.toLowerCase()) > -1; 
}); 

filteredPublikasiの代わりpublikasiと* ngForを交換してください。これを追加した理由は、publikasiProvider.getPublikasi()によって返されたすべてのデータを保持するためです。