离子将多个过滤器应用于列表

Question

我收到如下数据，我正在将其填充到列表中：

 tasks =   [
        {
            title: "One",
            prop1: "Lorem",
            prop2: "Lorem",
            prop3: "Lorem"
        },
        {
            title: "Two",
            prop1: "Lorem",
            prop2: "Lorem",
            prop3: "Lorem"
        },
        ...
    ]

和列表模板

  <ion-list>
    <button detail-none (click)="expandItem(task)" ion-item *ngFor="let task of tasks">
      <h2>{{task.title}}</h2>
    </button>
  </ion-list>

我想根据 prop1、prop2、prop3 等应用的多个过滤器来过滤此列表

我有 select 个盒子：

  <ion-row padding>
    <ion-col>
      <ion-list>
        <ion-item>
          <ion-label>Frequence of performance</ion-label>
          <ion-select>
            <ion-option *ngFor="let frequency of prop1_options" value="{{frequency.value}}">{{frequency.title}}</ion-option>
          </ion-select>
        </ion-item>
      </ion-list>
    </ion-col>
    <ion-col>
      <ion-list>
        <ion-item>
          <ion-label>Importance</ion-label>
          <ion-select>
            <ion-option *ngFor="let importance of prop2_options" value="{{importance.value}}">{{importance.title}}</ion-option>
          </ion-select>
        </ion-item>
      </ion-list>
    </ion-col>
    <ion-col>
      <ion-list>
        <ion-item>
          <ion-label>Importance of improvement</ion-label>
          <ion-select>
            <ion-option *ngFor="let improvement of filer_per_improvement" value="{{improvement.value}}">{{improvement.title}}</ion-option>
          </ion-select>
        </ion-item>
      </ion-list>
    </ion-col>
    <ion-col>
      <ion-list>
        <ion-item>
          <ion-label>Stakeholder</ion-label>
          <ion-select>
            <ion-option *ngFor="let stakeholder of prop3_options" value="{{stakeholder.value}}">{{stakeholder.title}}</ion-option>
          </ion-select>
        </ion-item>
      </ion-list>
    </ion-col>
  </ion-row>

我的理解是我需要创建管道来实现此目的，但我不确定应该如何创建这些管道？一个或多个管道，性能如何？

Answer 1

本文对您编写管道代码有帮助吗？ https://amitthakkar.github.io/Pipes-In-Angular2/

从我链接的页面显示了如何声明管道：

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

    @Pipe({name: 'range'})
    export class RangePipe implements PipeTransform {
        transform(minValue:number, maxValue:number):number[] {
            let range = [];
            for (let index = minValue; index <= maxValue; index++) {
                range.push(index);
            }
            return range;
        }
    }

离子将多个过滤器应用于列表

Ionic apply multiple filters to a list

ionic-framework

ionic2

ionic3

angular