Question

我想基于字符串中存在特定子字符串的事实来过滤Angular 4中的ngFor循环中的项目

对于Ex：

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时仅显示代理0 搜索1时仅显示代理1 在搜索＆＃39; a＆＃39;，＆＃39;＆＃39; e＆＃39;，＆＃39; n＆＃39;，＆＃39; t＆＃39;时显示所有内容，＆＃39; ＆＃39;等;

我设法从{{ab}}

中的文本框中保存输入

即

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

values = '';
ab = '';
 onagentKey(event: any) { 
     this.values = event.target.value;
   this.ab = this.values;

  }

所以任何人都可以告诉我什么以及如何使用过滤器，管道或任何其他东西来解决这个问题

提前谢谢

Answer 1

我的faovrite解决方案是使用管道：

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>

如果您需要帮助来阅读代码，请随时提问

Answer 2

我的解决方案几乎与@Maryannah相同，但是如果有人要在整个对象值中而不是单个字段中进行搜索，那可能很有价值。

@Pipe({
    name: 'textSearch',
    pure: false
})
export class TextSearchPipe implements PipeTransform {
    transform(value: any[], query: string): any[] {
        return query
            ? value.filter(
                  obj =>
                      Object.keys(obj)
                          .map(key => obj[key])
                          .toString()
                          .toLocaleLowerCase()
                          .indexOf(query.toLocaleLowerCase()) !== -1
              )
            : value;
    }
}

如何使用输入字段过滤Angular 4中* ngFor循环内的项目

2 个答案: