Ionic 2 - 在离子列表上应用过滤器

Question

我对基于用户可应用的某些过滤器过滤数组或离子列表有疑问。你能不能给我一个关于如何做到这一点的方法，以及实现这个目标的最佳方法是什么？我想要一个亚马逊提供的类似功能。看下面的截图。谢谢。

Answer 1

首先你想添加一个popover（这是在离子2只是另一个页）。在此页面中，您可以创建要过滤的项目。

页之间的沟通，为您要筛选的项目和类别的酥料饼的页面，以滤除页面将与离子2的navParams控制器和/或onDidDissmis呼叫在酥料​​饼的控制器来完成

项页

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(); 
     } 
} 

所以，当你点击openPopover()它将会在酥料饼，然后用户可以选择的项目作为筛选打开FilterItemPage页。所选过滤器项目随后需要传回到主项目页面（点击后），该过滤器项目将交给onDidDissmiss供弹出窗口使用。你可以通过选择是（并且现在在filteredItems保持）在popover页面中的项目持有这些项目，并收集他们在navParams - 见下文

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

现在在酥料饼的页面（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); 

     } 
}