如何根据选定的下拉列值过滤* ngFor结果 [英] how to filter *ngFor result based on a selected dropdown value
本文介绍了如何根据选定的下拉列值过滤* ngFor结果的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
选择类别:
<ion-select name="categories">
<ion-option *ngFor="let category of categories;">
{{category}}
</ion-option>
</ion-select>
列出物品:
<ion-item-sliding *ngFor="let item of items; let idx = index;">
<ion-item>
<h2>{{item.title}}</h2>
</ion-item>
...
</ion-item-sliding>
如何使用(select)中的值来选择列出的类别?我尝试添加一个ngModule并将其作为条件传递给滑动ngFor,但它不起作用。
How can I use the value from (select) to choose which category gets listed? I tried adding a ngModule in and passing it as a condition into the sliding ngFor, but it wouldn't work.
推荐答案
你可以使用烟斗来实现这个目标
You can use a pipe to achieve this
<ion-item-sliding *ngFor="let item of items | categorySelected; let idx = index;">
<ion-item>
<h2>{{item.title}}</h2>
</ion-item>
...
</ion-item-sliding>
在你的转换方法中你可以执行你的逻辑
In your transform method you can perform your logic
transform(s[],cat){
///logic
return filteredArray
}
更新1:完整答案
自定义pipe将具有以下代码,
Custom pipe will have the below code,
transform(records: Array<any>, property:any): any {
let sortedArray=[];
if(property){
sortedArray =_.filter(records, {'office':property.Name]);
console.log(sortedArray);
return sortedArray
}
}
下拉列表和项目列表
<div>
<select [(ngModel)]="selectedElement">
<option *ngFor="let type of types" [ngValue]="type">
{{type.Name}}</option>
</select>
<span *ngFor="let x of array | orderBy:selectedElement">{{x.firstName}}</span>
</div>
LIVE DEMO
这篇关于如何根据选定的下拉列值过滤* ngFor结果的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文