如何根据对象属性字符串过滤"ngFor"循环中的项目 [英] How to filter items inside “ngFor” loop, based on object property string
问题描述
我需要通过更改下拉列表中的类别来过滤ngFor
循环内的项目.因此,当从列表中选择特定类别时,它应仅列出包含相同类别的项目.
I need to filter items inside an ngFor
loop, by changing the category in a drop-down list. Therefore, when a particular category is selected from the list, it should only list the items containing that same category.
HTML模板:
<select>
<option *ngFor="let model of models">{{model.category}}</option>
</select>
<ul class="models">
<li *ngFor="let model of models" (click)="gotoDetail(model)">
<img [src]="model.image"/>
{{model.name}},{{model.category}}
</li>
</ul>
商品数组:
export var MODELS: Model[] = [
{ id: 1,
name: 'Model 1',
image: 'img1',
category: 'Cat1',
},
{ id: 2,
name: 'Model 2',
image: 'img2',
category: 'Cat3',
},
{ id: 3,
name: 'Model 3',
image: 'img3',
category: 'Cat1',
},
{ id: 4,
name: 'Model 4',
image: 'img4',
category: 'Cat4',
},
...
];
此外,下拉列表还包含重复的类别名称.必须只列出唯一的类别(字符串).
Also, the drop-down list contains repeated category names. It is necessary for it to list only unique categories (strings).
我知道创建自定义管道是执行此操作的正确方法,但是我不知道该怎么写.
I know that creating a custom pipe would be the right way to do this, but I don't know how to write one.
柱塞: http://plnkr.co/edit/tpl:2GZg5pLaPWKrsD2JRted?p=预览
推荐答案
以下是示例管道:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'matchesCategory'
})
export class MathcesCategoryPipe implements PipeTransform {
transform(items: Array<any>, category: string): Array<any> {
return items.filter(item => item.category === category);
}
}
要使用它:
<li *ngFor="let model; of models | matchesCategory:model.category" (click)="gotoDetail(model)">
=====对于plunkr示例====
===== for the plunkr example ====
您需要选择更改以反映某些变量
You need your select changes to reflect in some variable
首先在您的班级中定义一个成员:
First define in your class a member:
selectedCategory: string;
然后更新您的模板:
<select (change)="selectedCategory = $event.target.value">
<option *ngFor="let model of models ">{{model.category}}</option>
</select>
最后,使用管道:
<li *ngFor="let model; of models | matchesCategory:selectedCategory" (click)="gotoDetail(model)">
====看到the车手后的评论====
==== comments after seeing the plunker ====
我注意到您使用了诺言. Angular2更面向rxjs.因此,我要更改的第一件事是为您服务,请替换:
I noticed you used promise. Angular2 is more rxjs oriented. So the first thing I'd change is in your service, replace:
getModels(): Promise<Model[]> {
return Promise.resolve(MODELS);
}
收件人:
getModels(): Observable<Array<Model>> {
return Promise.resolve(MODELS);
}
和
getModels(id: number): Observable<Model> {
return getModels().map(models => models.find(model.id === id);
}
然后在您的ModelsComponent
models$: Observable<Array<Model>> = svc.getModels();
uniqueCategories$: Observable<Array<Model>> = this.models$
.map(models => models.map(model => model.category)
.map(categories => Array.from(new Set(categories)));
您的选择将变为:
<option *ngFor="let category; of uniqueCategories$ | async">{{model.category}}</option>
和您的列表:
<li *ngFor="let model; of models$ | async | matchesCategory:selectedCategory" (click)="gotoDetail(model)">
这是一个非常草稿的解决方案,因为您有很多重复项,并且您一直在查询服务.以此为起点,仅查询服务一次,然后从获得的结果中得出特定的值.
This is a very drafty solution since you have many duplicates and you keep querying the service. Take this as a starting point and query the service only once, then derive specific values from the result you got.
如果您想保留代码,只需实现UniqueValuesPipe,其转换将获得一个参数,并对其进行过滤,以使用Array.from(new Set(...))
返回唯一的类别.不过,您首先需要将其映射到字符串(类别).
If you'd like to keep you code, just implement a UniqueValuesPipe, its transform will get a single parameter and filter it to return unique categories using the Array.from(new Set(...))
. You will need though to map it to strings (categories) first.
这篇关于如何根据对象属性字符串过滤"ngFor"循环中的项目的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!