Question

我正在尝试创建一个过滤器，以了解有关离子的更多信息。我走得很远，但现在我被卡住了。我正在尝试为每个选项添加一个切换，当用户激活切换时，这些选项需要显示。到目前为止，我可以通过下拉菜单来完成。但有些事情可以做得更好。

现在，在我的提供商处，我存储了这样的数据;

gerechten = [
{ "id": 1, "name": "name 1", "soort": "pasta"},
{ "id": 2, "name": "name 2", "soort": "pasta1"},
{ "id": 3, "name": "name 3", "soort": "pasta2"},
{ "id": 4, "name": "name 4", "soort": "pasta3"},
{ "id": 5, "name": "name 5", "soort": "pasta1"},
{ "id": 6, "name": "name 6", "soort": "pasta"},

我这样过滤它，注意我需要添加||对于每个选项，所以现在我只能过滤2个选项。有没有办法自动为我提供的所有选项？

     query(params?: any) {
    let returnData=this.gerechten;
    if (!params) {
      return returnData;
    }
    console.log("filtering with this",params);

    if(params['soort']!=="" || params['soort2']!==""){
      returnData = returnData.filter((item) => {
        if(params['soort']==item['soort'] || params['soort2']==item['soort']){
          return item;
        }
      });
    }
    return returnData;
  }

My filterpage.ts looks like this

    export class DataFilterPage {
  filterData={
    ingredienten:"",
    soort:"",
    soort2:""
  }

  soorten=[]
  soortenNew=[]

  constructor(
    public viewCtrl: ViewController,
    public navCtrl: NavController, 
    public navParams: NavParams,
    public gerechtenprovider: GerechtenProvider
  ) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad DataFilterPage');

    this.soorten = this.gerechtenprovider.gerechten.map((item)=>{
      return item.soort;
    })
    this.soortenNew =  Array.from(new Set(this.soorten ));
  }

  dismiss() {
    this.viewCtrl.dismiss(this.filterData);
  }

我的filterpage.html如下（我可以显示切换，但它们不起作用）

    <ion-item>
  <ion-label>soort 1</ion-label>
  <ion-select [(ngModel)]="filterData.soort" interface="action-sheet">
    <ion-option *ngFor="let soort of soortenNew" value="{{soort}}">{{soort}}</ion-option>
  </ion-select>
</ion-item>


<ion-item>
    <ion-label>soort 2</ion-label>
    <ion-select [(ngModel)]="filterData.soort2" interface="action-sheet">
      <ion-option *ngFor="let soort of soortenNew" value="{{soort}}">{{soort}}</ion-option>
    </ion-select>
  </ion-item>



<ion-item *ngFor="let soort of soortenNew" [attr.soort]="soort">
    <span item-start class="dot"></span>
  <ion-label>{{soort}}</ion-label>
  <ion-toggle [(ngModel)]="filterData.soort"></ion-toggle>
</ion-item>



<ion-item>
  <button ion-button full (click)="dismiss()">Filter</button>
</ion-item>

Anny对此有所帮助吗？

Answer 1

过滤元素的最佳解决方案是创建Angular Pipe。

你的HTML应该是这样的：

<ion-item *ngFor="let soort of soorten | soortenFiltered:filterData">
  <span item-start class="dot"></span>
  <ion-label>{{soort}}</ion-label>
  <ion-toggle [(ngModel)]="filterData.soort"></ion-toggle>
</ion-item>

你必须创建一个这样的管道：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'soortFiltered',
})
export class SoortFilteredPipe implements PipeTransform {
  transform(soorten: any[], filteredData: any) {
    let myNewSoortenFiltered;
    myNewSoortenFiltered = soorten.filter((item) => {
      if(filteredData['soort'] == item['soort'] || filteredData['soort2'] == item['soort']) {
        return item;
      }
    });
    return myNewSoortenFiltered;
  }
}

像这样的东西。

这样您就可以重复使用在其他组件中创建的过滤器。

Ionic 3，Muliple切换过滤器选项

1 个答案: