Solución:
Aquí hay una solución que utiliza el objeto pasado como filtro de columnas múltiples. Lo encontré más conveniente que pasar una matriz 2D:
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(items: Array<any>, filter: {[key: string]: any }): Array<any> {
return items.filter(item => {
const notMatchingField = Object.keys(filter)
.find(key => item[key] !== filter[key]);
return !notMatchingField; // true if matches all fields
});
}
}
Tener una matriz de objetos con varias columnas:
this.people = [
{name: 'John', age: 27, sex: 'male'},
{name: 'Lara', age: 21, sex: 'female'},
{name: 'Rick', age: 29, sex: 'male'},
{name: 'Eva', age: 27, sex: 'female'},
{name: 'Mike', age: 27, sex: 'male'}
];
Y un filtro:
this.peopleFilter = {age: 27, sex: 'male'};
Úselo como:
<div *ngFor="let person of people | filter: peopleFilter;"></div>
Como resultado, dos personas cumplen nuestros criterios: John y Miguel.
Aquí está el plunker de trabajo: Demostración de tubería de filtro de múltiples columnas.
Esto es lo que hice con Angular 8:
Objetivo: busque en varias propiedades, por ejemplo, “Propiedad1” y “Propiedad2” de una lista de elementos para una palabra clave determinada:
app.module.ts:
......
import { MyFilterPipe } from './shared/pipes/my-filter.pipe';
@NgModule({
declarations: [
...
MyFilterPipe
],
imports: [
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Tubería: content-filter.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'myFilter'
})
export class MyFilterPipe implements PipeTransform {
transform(items: any[], keyword: any, properties: string[]): any[] {
if (!items) return [];
if (!keyword) return items;
debugger;
return items.filter(item => {
var itemFound: Boolean;
for (let i = 0; i < properties.length; i++) {
if (item[properties[i]].toLowerCase().indexOf(keyword.toLowerCase()) !== -1) {
itemFound = true;
break;
}
}
return itemFound;
});
}
}
componente:
<input type="search" class="form-control filter-list-input" placeholder="Filter"
aria-label="Filter" name="search" [(ngModel)]="searchText" >
<div *ngFor="let itemof myItems | myFilter:searchText:['Property1', 'Property2']; let i = index">...
</div>
componente.ts:
export class MyListComponent implements OnInit {
...
searchText: string;
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)