gpt4 book ai didi

angularjs - 如何在angular2的列表中应用搜索过滤器?

转载 作者:太空狗 更新时间:2023-10-29 18:08:28 25 4
gpt4 key购买 nike

我想在存储在数组中的数据列表上实现搜索过滤器,我想像在数据表中搜索一样应用搜索过滤器。如下图所示。但在那些领域(姓名,地址..等)是不固定的。

based on search textbox value apply filter on below data

我怎样才能做到这一点?

最佳答案

DEMO

如果您想按其他字段进行过滤,只需将它们添加到管道中即可:

import { Pipe,PipeTransform} from '@angular/core';

@Pipe({
name: 'searchFilter'
})
export class SearchFilter implements PipeTransform {
transform(items: any[], criteria: any): any {

return items.filter(item =>{
for (let key in item ) {
if((""+item[key]).toLocaleLowerCase().includes(criteria.toLocaleLowerCase())){
return true;
}
}
return false;
});
}
}

@Component({
selector: 'sites-component',
template: `
<input #search (keyup)="0">
<ul>
<li *ngFor="let site of (sites | searchFilter: search.value )">(...)</li>
</ul>
`
})
export class SitesComponent{
sites : Array;
}

不要忘记在您的模块中声明管道。

关于angularjs - 如何在angular2的列表中应用搜索过滤器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42715267/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com