Общая поисковая труба Angular6

Question

Как я могу сделать общий поиск в таблице, используя трубы в Angular? У меня есть этот рабочий фрагмент , но значение 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
  }

Answer 1

Используя 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;
  }

Answer 2

Просто просто проверьте, соответствует ли ваш матч истинному, и отправьте его через

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