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等应用的多个过滤器来过滤此列表。

我有选择框：

  <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将多个过滤器应用于列表

1 个答案: