<li *ngFor="let item of items | myfilter:filterargs">
在你的管道中:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'myfilter',
pure: false
})
export class MyFilterPipe implements PipeTransform {
transform(items: any[], filter: Object): any {
if (!items || !filter) {
return items;
}
// filter items array, items which match and return true will be
// kept, false will be filtered out
return items.filter(item => item.title.indexOf(filter.title) !== -1);
}
}
<a class="list-group-item"
*ngFor="let album of filteredAlbumList">
</a>
我发现特定于应用程序的专用过滤器比管道更好,因为它保持与过滤器相关的逻辑与组件 .
管道更适合全局可重用的过滤器 .
0
我创建了以下管道,用于从列表中获取所需的项目 .
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(items: any[], filter: string): any {
if(!items || !filter) {
return items;
}
// To search values only of "name" variable of your object(item)
//return items.filter(item => item.name.toLowerCase().indexOf(filter.toLowerCase()) !== -1);
// To search in values of every variable of your object(item)
return items.filter(item => JSON.stringify(item).toLowerCase().indexOf(filter.toLowerCase()) !== -1);
}
}
21 回答
基本上,您编写一个管道,然后可以在
*ngFor
指令中使用 .在您的组件中:
在模板中,您可以将字符串,数字或对象传递给管道以用于过滤:
在你的管道中:
记得在
app.module.ts
注册管道;你不再需要在@Component
注册管道Here's a Plunker演示了使用自定义过滤器管道和内置切片管道来限制结果 .
请注意(正如几位评论员指出的那样)there is a reason为什么Angular中没有内置的过滤管道 .
很多人都有很好的方法,但这里的目标是通用并定义一个数组管道,它在与* ngFor的关系中可以非常重复使用 .
callback.pipe.ts (don 't forget to add this to your module' s声明数组)
然后在您的组件中,您需要实现一个具有以下签名的方法 (item: any) => boolean ,在我的例子中,我称之为filterUser,它过滤用户的年龄超过18年 .
Your Component
最后但并非最不重要的是,您的HTML代码将如下所示:
Your HTML
正如您所看到的,此管道在所有数组中都非常通用,例如需要通过回调过滤的项目 . 在我的案例中,我发现它对* ngFor类似场景非常有用 .
希望这可以帮助!!!
codematrix
简化方式(由于性能问题仅在小型阵列上使用 . 在大型阵列中,您必须通过代码手动生成过滤器):
见:https://angular.io/docs/ts/latest/guide/pipes.html#!#no-filter-pipe
用法:
如果使用变量作为第二个参数,请不要使用引号 .
这是我在不使用管道的情况下实现的 .
component.html
component.ts
我不确定它什么时候进来,但是他们已经制作了切片管来做到这一点 . 它也有很好的记录 .
https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html
您还可以使用以下内容:
如果您的商品符合条件,则仅显示div
有关详细信息,请参阅angular documentation如果您还需要索引,请使用以下命令:
Angular2中的管道与命令行上的管道类似 . 每个先前值的输出都被送入管道后的过滤器,这样就可以很容易地链接过滤器,如下所示:
对于此要求, I implement and publish a generic component . 看到
https://www.npmjs.com/package/w-ng5
要使用此组件,请在使用npm安装此软件包之前:
之后,在app.module中导入模块
在下一步中,添加app.module的声明部分:
Sample use
Filtering simple string
Filtering complex string - field 'Value' in level 2
Filtering complex string - middle field - 'Value' in level 1
Filtering complex array simple - field 'Nome' level 0
Filtering in tree fields - field 'Valor' in level 2 or 'Valor' in level 1 or 'Nome' in level 0
Filtering nonexistent field - 'Valor' in nonexistent level 3
此组件使用无限属性级别...
我根据这里和其他地方的答案创建了一个plunker .
另外,我必须添加一个
@Input
,@ViewChild
和ElementRef
的<input>
并创建和subscribe()
到它的一个observable .Angular2搜索过滤器:PLUNKR(更新:plunker不再有效)
管道是最好的方法 . 但是低于一个也会有效 .
我喜欢用于特定于应用程序的过滤器的另一种方法是在组件上使用自定义只读属性,这允许您比使用自定义管道(IMHO)更清晰地封装过滤逻辑 .
例如,如果我想绑定到
albumList
并过滤searchText
:要在HTML中绑定,您可以绑定到只读属性:
我发现特定于应用程序的专用过滤器比管道更好,因为它保持与过滤器相关的逻辑与组件 .
管道更适合全局可重用的过滤器 .
我创建了以下管道,用于从列表中获取所需的项目 .
小写转换只是为了匹配不区分大小写的方式 . 您可以在视图中使用它,如下所示: -
理想情况下,您应该为此创建angualr 2管道 . 但是你可以做到这一点 .
这是我的代码:
样品:
这是我在一段时间后创建的一个例子,其中包括一个有效的插件 . 它提供了一个过滤管道,可以过滤任何对象列表 . 您基本上只需在ngFor规范中指定属性和值{key:value} .
它与@ NateMay的回应没什么不同,除了我用相对冗长的细节解释它 .
在我的例子中,我使用这种标记过滤了用户在我的数组中对象的“label”属性输入的某些文本(filterText)上的无序列表:
https://long2know.com/2016/11/angular2-filter-pipes/
基于上面提出的非常优雅的回调管道解决方案,可以通过允许传递额外的过滤器参数来进一步概括它 . 然后我们有:
callback.pipe.ts
component
html
在component.ts文件中使用
@Pipe
创建Filter的第一步:your.component.ts
和Person对象的数据结构:
person.ts
在您的html文件视图中:
your.component.html
这是你的阵列
这是你的ngFor循环过滤器:
在那里我使用filterProduct即时产品,因为我想保留我的原始数据 . 这里模型_filterText用作输入框 . 当有任何更改时,setter函数将调用 . 在setFilterText中调用performProduct,它将仅返回与输入匹配的结果 . 我使用小写字母不区分大小写 .
经过一些谷歌搜索,我遇到了
ng2-search-filter
. In将获取您的对象并对所有寻找匹配项的对象属性应用搜索项 .一个简单的解决方案,与Angular 6一起用于过滤ngFor,它是以下内容:
Span 很有用,因为它本身并不代表任何东西 .
我知道这是一个老问题,但我认为提供另一种解决方案可能会有所帮助 .
相当于AngularJS
在Angular 2中,您无法在同一元素上使用* ngFor和* ngIf,因此它将遵循:
如果你不能用作内部容器,请改用ng-container . 当你想要在你的应用程序中有条件地附加一组元素(即使用* ngIf =“foo”)但又不想用另一个元素包装它们时,ng-container非常有用 .