代码之家 › 专栏 › 技术社区 › Thinker

Ionic对列表应用多个筛选器

ionic3 ionic2 ionic-framework angular

Thinker · 技术社区 · 6 年前

我收到如下数据,我正在列表中填充这些数据:

 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>

我的理解是,我需要创建管道来实现这一点,但我不确定应该如何创建这些管道?只有一个管道或多个管道,性能如何?

1 回复 | 直到 6 年前

Stephen Kennedy annamataws 6 年前

本文是否有助于编写管道代码? 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;
        }
    }

推荐文章

Gh05d · 更新到3后无法同步iOS项目

2 年前

Balram dangi · 离子电容器应用程序在ios中只显示白色的空白屏幕

2 年前

deszok · 电容器/离子文件系统写入文件到csv

2 年前

Fernando Aureliano · 无法在Ubuntu上升级离子版

2 年前

Rafael de Castro · 关于内存:在服务上存储json数据,还是在需要时随时获取?

2 年前

Anurag Singh · 通过mediacapture插件录制视频,但在通过文件插件-离子电容器上传时出现问题

2 年前

Andreea Purta · 未定义(读“coords”),使用@ionic native/geolocation-ionic/react

2 年前

plotnik · 发布Cordova插件的离子包装器

2 年前

Alex · 如何在Ionic Pro中设置正确版本的游戏服务

6 年前

Krishanu Mukherjee · 点击paypal时,Ionic 3 IOS应用程序崩溃

6 年前