angular2 + ionic2 的搜索过滤器

Question

我想用ionic2 + angular2 实现搜索功能。在以前的版本中我使用 This Filter Example 但在较新的版本中，这是行不通的。

angular2 + ionic2 是如何工作的？

Answer 1

您可以使用 Searchbar component. Please take a look at this working plunker.

它非常易于使用，首先在您的 Component 中确保有一个要在视图中显示的项目列表。

import { Component } from "@angular/core";
import { NavController } from 'ionic-angular/index';

@Component({
     templateUrl:"home.html"
})
export class HomePage {

  constructor() {
    this.initializeItems();
  }

  initializeItems() {
    this.items = [
      'Amsterdam',
      'Bogota',
      'Buenos Aires',
      'Dhaka'
    ];
  }

  getItems(ev) {
    // 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);
      })
    }
  }
}

就像您在该代码中看到的那样，这些代码行正在发挥神奇作用：

// 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-navbar primary>
    <ion-title>
      Ionic 2
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
  <ion-list>
    <ion-item *ngFor="let item of items">
      {{ item }}
    </ion-item>
  </ion-list>

</ion-content>

请注意，我们通过以下操作将 ion-searchbar 元素的 ionInput 事件绑定到 getItems 方法：

(ionInput)="getItems($event)

angular2 + ionic2 的搜索过滤器

Search filter for angular2 + ionic2

typescript

ionic-framework

ionic2

ionic3

angular