离子过滤器。使离子搜索栏工作。？

Question

我已经尝试了很多次来使离子搜索栏工作。我试过管道，但我只是不明白它是如何工作的。在 ionic 站点上，我看到了这个文档 http://ionicframework.com/docs/components/#searchbar 并尝试在我的代码中实现它，但没有成功。删除了所有代码，这是我目前拥有的。

HTML

<ion-header>
  <ion-navbar color ="primary">

    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>{{ appName }}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
<ion-searchbar></ion-searchbar>
  <ion-grid>
    <ion-row>
      <ion-col col-md-3 col-lg-2  col-xs-6 *ngFor="let item of items">
          <ion-card class="kaart">
          <ion-card-content>
            <ion-avatar item-left>
            <img class="pic" [src]="item.avatar" />
          </ion-avatar>
           <h2>{{item.voornaam}}</h2>
           <h2>{{item.achternaam}}</h2>
           <p>{{item.groep}}</p>
           <ion-icon color ="primary" class="call" name="call"></ion-icon>
           <ion-icon color ="primary" class="chatboxes" name="chatboxes"></ion-icon>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
</ion-grid>
</ion-content>

ts

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-page1',
  templateUrl: 'page1.html'
})

export class Page1 {
appName = 'Pezo';
items:any;

    constructor(private navCtrl: NavController) {

      this.items = [
      {voornaam: 'Mert', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 1'},
      {voornaam: 'Ask Sana', achternaam: 'Benzer', avatar: 'http://placehold.it/100', groep: 'Groep 1'},
      {voornaam: 'Koray', achternaam: 'Avci', avatar: 'http://placehold.it/100', groep: 'Groep 1'},
      {voornaam: 'Recep', achternaam: 'Ivedik', avatar: 'http://placehold.it/100', groep: 'Groep 3'},
      {voornaam: 'Gel', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 2'},
      {voornaam: 'Yarim', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 3'},
      {voornaam: 'Gonlume', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 3'},
      {voornaam: 'Huzur', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 2'},
      {voornaam: 'Ver', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 2'},
      {voornaam: 'Omrume', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 2'},
      {voornaam: 'Soylesin', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 3'},
      {voornaam: 'Tum', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 3'},
      {voornaam: 'Sarkilar', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 2'},
      {voornaam: 'Mustafa', achternaam: 'Ceceli', avatar: 'http://placehold.it/100', groep: 'Groep 2'},
      {voornaam: 'Real', achternaam: 'Madrid', avatar: 'http://placehold.it/100', groep: 'Groep 4'},
      {voornaam: 'Is', achternaam: 'Kampioen', avatar: 'http://placehold.it/100', groep: 'Groep 4'},
      {voornaam: 'Ruud van', achternaam: 'Nistelrooy', avatar: 'http://placehold.it/100', groep: 'Groep 4'},
      {voornaam: 'Dennis', achternaam: 'Bergkamp', avatar: 'http://placehold.it/100', groep: 'Groep 4'},
      {voornaam: 'Emre', achternaam: 'Mor', avatar: 'http://placehold.it/100', groep: 'Groep 4'},
      {voornaam: 'Irem', achternaam: 'Derici', avatar: 'http://placehold.it/100', groep: 'Groep 4'},
      {voornaam: 'qwertyuioplk', achternaam: 'qwertyuioplk', avatar: 'http://placehold.it/100', groep: 'Groep 2'},
      {voornaam: 'Cristiano', achternaam: 'Ronaldo', avatar: 'http://placehold.it/100', groep: 'Groep 1'}
      ]
      this.items = this.items.sort(function(a,b) {return (a.voornaam < b.voornaam) ? -1 : (a.voornaam > b.voornaam) ? 1 : 0 ;});
}
}

Answer 1

您应该使用items-array 的副本，在我的示例中为filteredItems，您可以根据输入进行过滤。在每个输入事件上“重新填充”filteredItems 并使用新的输入值再次对其进行过滤。 还要在*ngFor-loop 中使用filteredItems-array。

编辑： 将item.achternaam && 和item.voornaam && 添加为“守卫”。如果item 不具有voornaam 或achternaam 属性，则该括号内的执行将停止并计算为false。

TS

export class Page1 {
    items:Array<any>;
    // Add another array that will hold the objects that match the
    // search result
    filteredItems:Array<any>;

    constructor() {

        this.items = [
            {voornaam: 'Mert', achternaam: 'Sezen', avatar: 'http://placehold.it/100', groep: 'Groep 1'},
            // ...and many more                
            {voornaam: 'Cristiano', achternaam: 'Ronaldo', avatar: 'http://placehold.it/100', groep: 'Groep 1'}
        ]
        this.items = this.items.sort(function(a,b) {return (a.voornaam < b.voornaam) ? -1 : (a.voornaam > b.voornaam) ? 1 : 0 ;});

        // Make this function call
        this.initFilteredItems();
    }

    // This function makes `this.filteredItems` hold a reference to the 
    // `this.items`-array.
    initFilteredItems(){
        this.filteredItems = this.items;
    }

    // Function that performs the filtering
    filterItems(ev:any){
        // In case the `this.filteredItems` has been used before e.g.
        // containing a subset of `this.items`, we need to make it hold
        // a reference to the `this.items` again, which contains the
        // whole set of objects.
        this.initFilteredItems();

        // Get the new input-value
        let val = ev.target.value;

        // Make sure it contains a value and remove trailing whitespaces
        if(val && val.trim() != ''){
            // the `Array.prototype.filter()` returns a new array with
            // all elements that pass the test implemented by the 
            // provided function
            this.filteredItems = this.filteredItems.filter(item => {
                // Here filter by `voornaam` and `achternaam`
                // We use 'guards' (item.voornaam and item.achternaam) in
                // the beginning of each parenthesis set to check if these
                // properties exist on `item`, if not it evaluates to false.
                // Then we call `toLowerCase()` on both the property and 
                // the input-value to make the search case-insensitive.
                // The `indexOf()`-function checks if the input-value exists
                // in the property and returns the index if it does and -1
                // if it doesn't.
                return (item.voornaam && item.voornaam.toLowerCase().indexOf(val.toLowerCase()) > -1) || 
                   (item.achternaam && item.achternaam.toLowerCase().indexOf(val.toLowerCase()) > -1);
            })
        }
    }
}

HTML

<ion-content>
<!-- Here we register that `filterItems()` should be called when the
     `ionInput`-event fires, and pass the event data. -->
<ion-searchbar (ionInput)="filterItems($event)"></ion-searchbar>
  <ion-grid>
    <ion-row>
      <!-- Here in the `*ngFor` we use the property in our component class
           that contains the search result (`filteredItems`) -->
      <ion-col col-md-3 col-lg-2  col-xs-6 *ngFor="let item of filteredItems">
          <ion-card class="kaart">
          <ion-card-content>
            <ion-avatar item-left>
            <img class="pic" [src]="item.avatar" />
          </ion-avatar>
           <h2>{{item.voornaam}}</h2>
           <h2>{{item.achternaam}}</h2>
           <p>{{item.groep}}</p>
           <ion-icon color ="primary" class="call" name="call"></ion-icon>
           <ion-icon color ="primary" class="chatboxes" name="chatboxes"></ion-icon>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
</ion-grid>
</ion-content>