Ionic 2 - Anwenden von Filtern auf die Ion-Liste

Question

Ich habe eine Frage über das Filtern eines Arrays oder Ion-Liste basierend auf einigen Filtern, die Benutzer anwenden können. Kannst du mir bitte einen Hinweis geben, wie es geht und was ist der beste Weg, dies zu erreichen? Ich möchte eine ähnliche Funktionalität, die Amazon bietet. siehe Screenshot unten. Vielen Dank.

Answer 1

Erstens würden Sie ein popover hinzufügen (das ist nur eine andere Seite in ionischer 2). Auf dieser Seite können Sie die Elemente erstellen, nach denen Sie filtern möchten.

Die Kommunikation zwischen den Seiten, die Seite für die Elemente, die Sie filtern möchten, und die popover Seite der Kategorien wird zu filtern, indem Sie mit ionischen 2 des navParams Controller und/oder der onDidDissmis Anruf in der popover Controller

erfolgen So

Artikel Seite

import { Component } from '@angular/core'; 
import { NavController, NavParams, PopoverController } from 'ionic-angular'; 
import { FilterItemsPage } from '../../config/config.pages'; 

@Component({ 
    selector: 'items-page', 
    templateUrl: 'items-page.html' 
}) 
export class ItemsPage { 

     filteredItems:any; 

     constructor(public navCtrl: NavController, public navParams: NavParams, 
      public popoverCtrl:PopoverController) {} 

     openPopover(){ 
      let popover = this.popoverCtrl.create(FilterItemsPage); 
      popover.onDidDismiss(data => { 
       this.filteredItems = data 
      }); 
      popover.present(); 
     } 
} 

wenn Sie openPopover() klicken, wird es öffnen Sie Ihre Seite FilterItemPage in einem popover die dann kann der Benutzer einen Eintrag auszuwählen, zu filtern. Das ausgewählte Filterelement muss dann an die Hauptelementseite zurückgegeben werden, wenn darauf geklickt wird, und die onDidDissmiss für das Popover übergeben wird. Sie können diese Elemente halten, indem sie die Elemente vorbei, die ausgewählt wurden (und werden nun in filteredItems gehalten) an die popover Seite, und sammeln sie in der navParams - siehe unten

// Passing items that have already been added 
let popover = this.popoverCtrl.create(FilterItemsPage,this.filteredItems); 

Jetzt in der popover Seite (FilterItemsPage)

import { Component } from '@angular/core'; 
import { NavController, NavParams, ViewController } from 'ionic-angular'; 
import { ItemsPage } from '../../config/config.pages'; 

@Component({ 
    selector: 'filter-items-page', 
    templateUrl: 'filter-items-page.html' 
}) 
export class FilterItemsPage { 

    PassedFilteredItems:any; 
    itemsToFilterBy:any; 

     constructor(public navCtrl: NavController, public navParams: NavParams, 
     public viewCtrl: ViewController) { 
     this.PassedFilteredItems = this.navParams.data; 
     console.log('Items Page:', this.PassedFilteredItems); 
     } 

     openPopover(){ 
      let popover = this.popoverCtrl.create(FilterItemsPage); 
      popover.onDidDismiss(data => { 
       this.filteredItems = data 
      }); 
      popover.present(); 
     } 

     onSelectFilterOrSaveFilteredCollection(){ 

      // Get selected items from a form (of model) 
      // See angular reactive forms 
      // https://angular.io/docs/ts/latest/guide/reactive-forms.html 

      // Pass items on dismiss 
      // will be passed into onDidDismiss 
      this.viewCtrl.dismiss(itemsToFilterBy); 

     } 
}