J'utilise Pipes dans Angular 2+ pour filtrer les tableaux d'objets. Ce qui suit prend plusieurs arguments de filtre, mais vous pouvez n'en envoyer qu'un si cela convient à vos besoins. Voici un exemple StackBlitz . Il trouvera les clés que vous souhaitez filtrer, puis les filtres selon la valeur que vous fournissez. C'est en fait assez simple, si cela semble compliqué, ce n'est pas le cas, consultez l' exemple StackBlitz .
Voici le tuyau appelé dans une directive * ngFor,
<div *ngFor='let item of items | filtermulti: [{title:"mr"},{last:"jacobs"}]' >
Hello {{item.first}} !
</div>
Voici le Pipe,
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filtermulti'
})
export class FiltermultiPipe implements PipeTransform {
transform(myobjects: Array<object>, args?: Array<object>): any {
if (args && Array.isArray(myobjects)) {
// copy all objects of original array into new array of objects
var returnobjects = myobjects;
// args are the compare oprators provided in the *ngFor directive
args.forEach(function (filterobj) {
let filterkey = Object.keys(filterobj)[0];
let filtervalue = filterobj[filterkey];
myobjects.forEach(function (objectToFilter) {
if (objectToFilter[filterkey] != filtervalue && filtervalue != "") {
// object didn't match a filter value so remove it from array via filter
returnobjects = returnobjects.filter(obj => obj !== objectToFilter);
}
})
});
// return new array of objects to *ngFor directive
return returnobjects;
}
}
}
Et voici le composant contenant l'objet à filtrer,
import { Component } from '@angular/core';
import { FiltermultiPipe } from './pipes/filtermulti.pipe';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
items = [{ title: "mr", first: "john", last: "jones" }
,{ title: "mr", first: "adrian", last: "jacobs" }
,{ title: "mr", first: "lou", last: "jones" }
,{ title: "ms", first: "linda", last: "hamilton" }
];
}
Exemple StackBlitz
Exemple GitHub: créez une copie de travail de cet exemple ici
*Notez s'il vous plaît que dans une réponse fournie par Gunter, Gunter déclare que les tableaux ne sont plus utilisés comme interfaces de filtrage, mais j'ai recherché le lien qu'il fournit et je n'ai rien trouvé qui réponde à cette affirmation. De plus, l'exemple StackBlitz fourni montre que ce code fonctionne comme prévu dans Angular 6.1.9. Cela fonctionnera dans Angular 2+.
Codage heureux :-)