typescript - filtrare pipe Angular pe mai multe valori ale coloanelor din tabel
Încerc să implementez un filtru tip conductă pe mai multe valori pentru mai multe atribute într-un tabel.
Pot filtra mai multe valori pe un atribut. Dar nu pot să fac asta pentru mai multe valori ale mai multor atribute.
Implementarea mea a filtrului pipe pentru valori multiple într-un singur atribut,
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'vFilter',
pure: false
})
export class VFilterPipe implements PipeTransform {
transform(vList: any[], vfilter?: any): any {
if (!vList|| !Object.keys(vfilter).length) {
return vList;
}
return vList.filter(item => {
for (let key in vfilter) {
for(let value in vfilter[key]){
if ((item[key] === undefined || item[key] == vfilter[key][value]))
{
return true;
}
}
return false;
}
return false;
});
}
}
Array-ul meu de intrare este dat,
vList = [{'name':'jack','age':'25'},{'name':'sam','age':'25'},{'name':'smith','age':'25'},{'name':'jack','age':'28'}]
vfilter = {'name':['jack','sam'],'age':['25']}
Mă aștept ca rezultatul să fie asemănător cu cel de mai jos după filtrare,
vList = [{'name':'jack','age':'25'},{'name':'sam','age':'25'}]
Dar obțin rezultatul de mai jos,
vList = [{'name':'jack','age':'25'},{'name':'sam','age':'25'},{'name':'jack','age':'28'}]
Poate cineva să mă ajute să rezolv această problemă logică.
Răspuns #1
Bugul din logica codului tău este că returnezi true dacă oricare dintre filtre se potrivesc, când vrei să returnezi true doar dacă toate filtrele se potrivesc.
stackblitz
transform(vList: any[], vfilter?: any): any {
if (!vList || !Object.keys(vfilter).length) {
return vList;
}
return vList.filter(item => {
return Object.keys(vfilter)
.filter(_ => vfilter.hasOwnProperty(_))
.every(key => {
if(!item[key]) return true; // matches undefined value
const arrayValues = vfilter[key] as any[];
return arrayValues.some(_ => _ === item[key]);
});
});
}
