使用 Ionic 3 来自 JSON 数据的搜索栏答案

【问题标题】：Searchbar from JSON data with Ionic 3使用 Ionic 3 来自 JSON 数据的搜索栏
【发布时间】：2018-02-13 12:56:59
【问题描述】：

我对 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"
  }]

【问题讨论】：

storeName 在哪里？

标签： json angular typescript ionic3

【解决方案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() 返回的所有数据。

【讨论】：