通用搜索管道Angular6答案

【问题标题】：General search pipe Angular6通用搜索管道Angular6
【发布时间】：2019-04-21 20:42:10
【问题描述】：

如何在 Angular 中使用管道对表格进行一般搜索？ I have this working snippet，但i 的值只有0，我不知道为什么（正因为如此，它只会搜索name 列，如果我输入cc 它不会'找不到任何东西）。

如何修改代码以获得我想要的？感谢您的宝贵时间！

filter.pipe.ts

transform(value: any, input: string) {
    if (!value) {
      return [];
    }
    if (!input) {
      return value;
    }
    var valuesArr = []
    if (input) {
      input = input.toLowerCase();
      return value.filter(function (el: any) {
        valuesArr = Object.keys(el).map(key => el[key]);
        for (var i in valuesArr) {
          return valuesArr != null && valuesArr[i] != null && valuesArr[i] != undefined && valuesArr[i].toLowerCase().indexOf(input) > -1;
        }
      })
    }
    return value;
  }

app.html

<input type="text" [(ngModel)]="toSearch" (click)="onClick(toSearch)">

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Surname</th>
      <th>Group</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let user of users | filter : toSearch">
      <td>{{ user.name }}</td>
      <td>{{ user.surname }}</td>
      <td>{{ user.group }}</td>
    <tr>
  </tbody>
</table>

app.ts

  toSearch

  users = [
    {name: "john", surname: "john1", group: null},
    {name: "mike", surname: "", group: 'bb'},
    {name: "anne", surname: "anne1", group: ''},
    {name: "dan", surname: "dan1", group: 'cc'},
    {name: "ben", surname: "", group: 'a'},
  ]

  onClick(toSearch) {
    this.toSearch = toSearch
  }

【问题讨论】：

虽然可以在下面找到正确的答案。我想我会提供一些你可以做的小改动来清理代码。首先是删除if (input) { 语句，此时在代码中它保证是真实的，因为您刚刚检查了!input。其次，您可以将Object.keys(el).map(key => el[key]); 更改为Object.values(el)。
谢谢你的提示，我按照你说的修改了我的代码！ :-D

标签： javascript angular filter

【解决方案1】：

简单的只是检查你的匹配何时为真，然后发送它

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

@Pipe({
  name: 'filter',
})
@Injectable()
export class CheckBoxPipe implements PipeTransform {
  transform(value: any, input: string) {

    if (!value) {
      return [];
    }
    if (!input) {
      return value;
    }
    var values = []
    if (input) {
      input = input.toLowerCase();
      return value.filter(function (el: any) {
        values = Object.keys(el).map(key => el[key]);
        let result = false;
        for (var i in values) {
          result = values != null && values[i] != null && values[i] != undefined && values[i].toLowerCase().indexOf(input) > -1;
          if(result){
            return true
          }
        }
        return false;
      })
    }
    return value;
  }
}

【讨论】：

【解决方案2】：

我也建议使用 ES6 运算符：

transform(value: any[], input: string) {
    if (!value) {
      return [];
    }
    if (!input) {
      return value;
    }
    var valuesArr = []
    if (input) {
      console.log(input)
      input = input.toLowerCase();
      return value.filter( (el: any) => {
        valuesArr = Object.keys(el).map(key => el[key]);
        return valuesArr.some((elm)=> {
           if (JSON.stringify(elm).includes(input)) {
             return elm;
           }
           return null;
        })
      })
    }
    return value;
  }

【讨论】：