從JSON數據與Ionic 3搜索欄

Question

我對Ionic 3非常新，我試圖通過Ionic 3搜索欄過濾槽json響應。任何人都可以幫忙

這是我的代碼

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

而且標記：

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

我得到這個錯誤，當我搜索：

無法讀取的不確定

財產 'toLowerCase'

的JSON數據是這樣的：

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

嘗試將publikasi更改爲：

private publikasi: string[]; 

，並添加：

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

更換* ngFor與filteredPublikasi，而不是publikasi。我們添加這個filteredPublikasi的原因是我們要保留publikasiProvider.getPublikasi()返回的所有數據。