我收到类似下面的数据,我在列表中填充:
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>
我的理解是我需要创建管道来实现这一点,但我不确定应该如何创建它们?只需一个管道或多个管道,性能如何?
答案 0 :(得分: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;
}
}