Así que estoy tratando de construir una tubería personalizada para hacer un filtro de búsqueda de múltiples valores en un bucle ngFor. He buscado varias horas para un buen ejemplo de trabajo, y la mayoría de ellos se basan en compilaciones anteriores y no parecen funcionar. Así que estaba construyendo el Pipe y usando la consola para darme los valores. Sin embargo, parece que no puedo mostrar el texto de entrada.

Estos son los lugares anteriores que he buscado para encontrar ejemplos de trabajo:

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

Aquí está el código que tengo actualmente:

componente.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());
    });
  }
}

He importado la tubería al módulo.

Todavía soy un poco más nuevo en Angular 4 y estoy tratando de descubrir cómo hacer que esto funcione. ¡De todas formas, gracias por su ayuda!

Supongo que tendré que ser más específico. Ya construí una búsqueda de filtro en JS que no filtra todas las opciones, que es lo que estoy tratando de hacer. No solo filtra el nombre de usuario. Estoy filtrando las 4 piezas de datos. Elegí un Pipe porque esto era lo que Angular sugiere que hagas, ya que originalmente los usaron en AngularJS. Solo estoy tratando de recrear esencialmente la tubería de filtro que teníamos en AngularJS que eliminaron para el rendimiento. Todas las opciones que he encontrado no funcionan o son de versiones anteriores de Angular.

Si necesita algo más de mi código, hágamelo saber.