显然，Angular 2将像在Angular1中一样使用管道而不是过滤器，并结合ng-for来过滤结果，尽管实现看起来仍然很模糊，没有明确的文档。
也就是说，我想要达到的目标可以从以下角度来看待
<div *ng-for="#item of itemsList" *ng-if="conditon(item)"></div>
如何实现这样使用管道?
当前回答
对于这个需求，我实现并发布了一个通用组件。看到
https://www.npmjs.com/package/w-ng5
在使用此组件之前，使用npm安装此包:
npm install w-ng5 --save
之后，在app.module中导入模块
...
import { PipesModule } from 'w-ng5';
下一步，在app.module中添加declare部分:
imports: [
PipesModule,
...
]
样本用
过滤简单字符串
<input type="text" [(ngModel)]="filtroString">
<ul>
<li *ngFor="let s of getStrings() | filter:filtroString">
{{s}}
</li>
</ul>
在级别2中过滤复杂字符串字段“Value”
<input type="text" [(ngModel)]="search">
<ul>
<li *ngFor="let s of getComplexTypesExtends() | filter:[{field:'n1.n2.valor2', value: search}]">
{{s.nome}} - {{s.idade}} - {{s.n1.valor1}} - {{s.n1.n2.valor2}}
</li>
</ul>
过滤复杂字符串-中间字段- 1级中的“值”
<input type="text" [(ngModel)]="search3">
<ul>
<li *ngFor="let s of getComplexTypesExtends() | filter:[{field:'n1.valor1', value: search3}]">
{{s.nome}} - {{s.idade}} - {{s.n1.valor1}} - {{s.n1.n2.valor2}}
</li>
</ul>
过滤复杂数组的简单字段“Nome”级别为0
<input type="text" [(ngModel)]="search2">
<ul>
<li *ngFor="let s of getComplexTypesExtends() | filter:[{field:'nome', value: search2}]">
{{s.nome}} - {{s.idade}} - {{s.n1.valor1}} - {{s.n1.n2.valor2}}
</li>
</ul>
在树字段中过滤-在第2级中字段'Valor'或在第1级中字段'Valor'或在第0级中字段'Nome'
<input type="text" [(ngModel)]="search5">
<ul>
<li *ngFor="let s of getComplexTypesExtends() | filter:[{field:'n1.n2.valor2', value: search5}, {field:'n1.valor1', value: search5}, {field:'nome', value: search5}]">
{{s.nome}} - {{s.idade}} - {{s.n1.valor1}} - {{s.n1.n2.valor2}}
</li>
</ul>
过滤不存在的字段- 'Valor'在不存在的级别3
<input type="text" [(ngModel)]="search4">
<ul>
<li *ngFor="let s of getComplexTypesExtends() | filter:[{field:'n1.n2.n3.valor3', value: search4}]">
{{s.nome}} - {{s.idade}} - {{s.n1.valor1}} - {{s.n1.n2.valor2}}
</li>
</ul>
该组件具有无限属性级别…
其他回答
理想情况下，您应该为此创建angualr 2管道。但是你可以做这个魔术。
<ng-container *ngFor="item in itemsList">
<div*ngIf="conditon(item)">{{item}}</div>
</ng-container>
我创建了下面的管道，用于从列表中获取所需的项。
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);
}
}
小写转换只是为了匹配不区分大小写的方式。 你可以在你的视图中这样使用它:-
<div>
<input type="text" placeholder="Search reward" [(ngModel)]="searchTerm">
</div>
<div>
<ul>
<li *ngFor="let reward of rewardList | filter:searchTerm">
<div>
<img [src]="reward.imageUrl"/>
<p>{{reward.name}}</p>
</div>
</li>
</ul>
</div>
我根据这里和其他地方的答案创建了一个活塞。
此外，我必须添加一个<input>的@Input， @ViewChild和ElementRef，并创建和订阅()到它的一个可观察对象。
Angular2搜索过滤器:PLUNKR(更新:plunker不再工作)
对于这个需求，我实现并发布了一个通用组件。看到
https://www.npmjs.com/package/w-ng5
在使用此组件之前，使用npm安装此包:
npm install w-ng5 --save
之后，在app.module中导入模块
...
import { PipesModule } from 'w-ng5';
下一步，在app.module中添加declare部分:
imports: [
PipesModule,
...
]
样本用
过滤简单字符串
<input type="text" [(ngModel)]="filtroString">
<ul>
<li *ngFor="let s of getStrings() | filter:filtroString">
{{s}}
</li>
</ul>
在级别2中过滤复杂字符串字段“Value”
<input type="text" [(ngModel)]="search">
<ul>
<li *ngFor="let s of getComplexTypesExtends() | filter:[{field:'n1.n2.valor2', value: search}]">
{{s.nome}} - {{s.idade}} - {{s.n1.valor1}} - {{s.n1.n2.valor2}}
</li>
</ul>
过滤复杂字符串-中间字段- 1级中的“值”
<input type="text" [(ngModel)]="search3">
<ul>
<li *ngFor="let s of getComplexTypesExtends() | filter:[{field:'n1.valor1', value: search3}]">
{{s.nome}} - {{s.idade}} - {{s.n1.valor1}} - {{s.n1.n2.valor2}}
</li>
</ul>
过滤复杂数组的简单字段“Nome”级别为0
<input type="text" [(ngModel)]="search2">
<ul>
<li *ngFor="let s of getComplexTypesExtends() | filter:[{field:'nome', value: search2}]">
{{s.nome}} - {{s.idade}} - {{s.n1.valor1}} - {{s.n1.n2.valor2}}
</li>
</ul>
在树字段中过滤-在第2级中字段'Valor'或在第1级中字段'Valor'或在第0级中字段'Nome'
<input type="text" [(ngModel)]="search5">
<ul>
<li *ngFor="let s of getComplexTypesExtends() | filter:[{field:'n1.n2.valor2', value: search5}, {field:'n1.valor1', value: search5}, {field:'nome', value: search5}]">
{{s.nome}} - {{s.idade}} - {{s.n1.valor1}} - {{s.n1.n2.valor2}}
</li>
</ul>
过滤不存在的字段- 'Valor'在不存在的级别3
<input type="text" [(ngModel)]="search4">
<ul>
<li *ngFor="let s of getComplexTypesExtends() | filter:[{field:'n1.n2.n3.valor3', value: search4}]">
{{s.nome}} - {{s.idade}} - {{s.n1.valor1}} - {{s.n1.n2.valor2}}
</li>
</ul>
该组件具有无限属性级别…
我使用了一个动态过滤管道
源数据:
items = [{foo: 'hello world'}, {foo: 'lorem ipsum'}, {foo: 'foo bar'}];
在模板中，你可以在任意对象attr中动态设置过滤器:
<li *ngFor="let item of items | filter:{foo:'bar'}">
管:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter',
})
export class FilterPipe implements PipeTransform {
transform(items: any[], filter: Record<string, any>): any {
if (!items || !filter) {
return items;
}
const key = Object.keys(filter)[0];
const value = filter[key];
return items.filter((e) => e[key].indexOf(value) !== -1);
}
}
不要忘记在app.module.ts声明中注册管道
推荐文章
- Angular 5 -复制到剪贴板
- 错误:在switch上没有指定name属性的窗体控件的值访问器
- TypeScript枚举对象数组
- Angular 2 - innerHTML样式
- Angular 2显示和隐藏一个元素
- 具有构造签名的接口如何工作?
- 'React'指的是一个UMD全局，但当前文件是一个模块
- Angular 2中的“component”不是一个已知的元素
- TypeScript错误:属性“X”在类型“Window”上不存在
- 我怎么能计算在打字稿2日期之间的时间
- 如何刷新一个数据源(mat-table)
- 正确使用错误
- 如何修复TS2322:“可以实例化与约束'对象'的不同子类型”?
- 如何在Angular中动态加载外部脚本?
- 可观察到的。的不是一个函数
