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

     } 
}