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>

我搜索时收到此错误：

无法阅读属性＆to toLowerCase＆＃39;未定义的

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()返回的所有数据。

来自JSON数据的搜索栏与Ionic 3

1 个答案: