javascript - 通用搜索管道Angular6

Question

如何使用 Angular 中的管道对表进行一般搜索？我有这个工作片段，但值为ionly 0，我不知道为什么（正因为如此，它只会搜索name列，如果我键入cc它不会找到任何东西）。

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

过滤器.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;
  }

应用程序.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>

应用程序.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
  }

标签： javascriptangularfilter

Answer 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;
  }
}