Então, eu estou tentando criar um canal personalizado para fazer um filtro de pesquisa de vários valores em um loop ngFor. Procurei várias horas em busca de um bom exemplo de trabalho, e a maioria delas é baseada em compilações anteriores e parece não funcionar. Então, eu estava construindo o Pipe e usando o console para me fornecer os valores. No entanto, não consigo exibir o texto de entrada.

Aqui estão os locais anteriores que eu procurei para encontrar exemplos de trabalho:

Filtro angular de 4 tubos

http://jilles.me/ng-filter-in-angular2-pipes/

https://mytechnetknowhows.wordpress.com/2017/02/18/angular-2-pipes-passing-multiple-filters-to-pipes/

https://plnkr.co/edit/vRvnNUULmBpkbLUYk4uw?p=preview

https://www.youtube.com/results?search_query=filter+search+angular+2

https://www.youtube.com/watch?v=UgMhQpkjCFg

Aqui está o código que eu tenho atualmente:

component.html

<input type="text" class="form-control" placeholder="Search" ngModel="query" id="listSearch" #LockFilter>

      <div class="panel panel-default col-xs-12 col-sm-11" *ngFor="let lock of locked | LockFilter: query">
        <input type="checkbox" ngModel="lock.checked" (change)="openModal($event, lock)" class="check" id="{{lock.ID}}">
        <label for="{{lock.ID}}" class="check-label"></label>
        <h3 class="card-text name" ngModel="lock.name">{{lock.User}}</h3>
        <h3 class="card-text auth" ngModel="lock.auth">{{lock.AuthID}}</h3>
        <h3 class="card-text form" ngModel="lock.form">{{lock.FormName}}</h3>
        <h3 class="card-text win" ngModel="lock.win">{{lock.WinHandle}}</h3>
      </div>

pipe.ts

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

@Pipe({
  name: 'LockFilter'
})

export class LockFilterPipe implements PipeTransform {
  transform(locked: any, query: string): any {
    console.log(locked); //this shows in the console
    console.log(query); //this does not show anything in the console when typing
    if(!query) {
      return locked;
    }
    return locked.filter((lock) => {
      return lock.User.toLowerCase().match(query.toLowerCase());
    });
  }
}

Eu importei o pipe no módulo.

Ainda sou um pouco mais novo no Angular 4 e estou tentando descobrir como fazer isso funcionar. De qualquer forma obrigado pela sua ajuda!

Acho que vou precisar ser mais específico. Eu já criei uma pesquisa de filtro em JS que não filtra todas as opções, e é isso que estou tentando fazer. Não basta filtrar o nome do usuário. Estou filtrando todos os 4 dados. Eu escolhi um Pipe, pois era isso que o Angular sugere que você faça como eles os usavam originalmente no AngularJS. Estou apenas tentando recriar essencialmente o tubo de filtro que tínhamos no AngularJS que eles removeram para desempenho. Todas as opções que encontrei não funcionam ou são de versões anteriores do Angular.

Se precisar de mais alguma coisa do meu código, entre em contato.