如何使用输入字段在Angular 4中的* ngFor循环中过滤项目 [英] How to filter items inside *ngFor loop in Angular 4 using input field
问题描述
我想基于字符串中是否存在特定子字符串这一事实来过滤Angular 4中ngFor循环中的项目
I Want to filter the items in an ngFor loop in Angular 4 based on the fact if a particular substring exist inside a string
例如:
agents[] = [
{ id: 11, name: 'Agent 0', email:'admin@ab.com' },
{ id: 12, name: 'Agent 1', email:'admin@ab.com'},
{ id: 13, name: 'Agent 2', email:'admin@ab.com' },
{ id: 14, name: 'Agent 3', email:'admin@ab.com' },
{ id: 15, name: 'Agent 4', email:'admin@ab.com' },
{ id: 16, name: 'Agent 5', email:'admin@ab.com' },
{ id: 17, name: 'Agent 6', email:'admin@ab.com' },
{ id: 18, name: 'Agent 7', email:'admin@ab.com' },
{ id: 19, name: 'Agent 8', email:'admin@ab.com' },
{ id: 20, name: 'Agent 9', email:'admin@ab.com' }
];
搜索名称
搜索0时仅显示Agent 0 搜索1时仅显示业务代表1 搜索'a'，'g'，'e'，'n'，'t'，''等时显示所有内容
Show only Agent 0 when search for 0 show only agent 1 when search for 1 show all when search for 'a', 'g', 'e', 'n','t', ' ' etc;
我设法将来自文本框的输入保存在{{ab}}
i have managed to save a input from the text box in {{ab}}
即
agent.component.html
agent.component.html
<input (keyup)="onagentKey($event)" class="form-control input-lg" type="text" placeholder="Find a Agent....">
<div *ngFor = "let agent of agents" class="col-sm-4">Name : {{agent.name}}<br>
Email : {{agent.email}}
</div>
agent.component.ts
agent.component.ts
values = '';
ab = '';
onagentKey(event: any) {
this.values = event.target.value;
this.ab = this.values;
}
任何人都可以告诉我什么以及如何使用过滤器，管道或其他任何东西来解决此问题
So can anyone tell me what and how to use filter,pipe or any other thing to solve this problem
预先感谢
推荐答案
我最喜欢的解决方案是使用管道:
My faovrite solution is to use a pipe :
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'fullTextSearch',
pure: false
})
export class FullTextSearchPipe implements PipeTransform {
constructor() { }
transform(value: any, query: string, field: string): any {
return query ? value.reduce((prev, next) => {
if (next[field].includes(query)) { prev.push(next); }
return prev;
}, []) : value;
}
}
并在您的HTML中
<input type="text" [(ngModel)]="query">
<div *ngFor="let agent of agents | fullTextSearch:query:'name'"><!-- ... --></div>
如果您需要帮助来阅读代码，请随时询问
If you need help to read the code, feel free to ask
这篇关于如何使用输入字段在Angular 4中的* ngFor循环中过滤项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
