Filtre sur plusieurs colonnes à l'aide d'un tuyau angulaire 2

Je suis en train de filtre Array de données basée sur plusieurs colonnes à l'aide de seulement un Pipe. Maintenant, Il filtre la première valeur de la colonne. Veuillez vérifier mon code ci-dessous et de m'aider à régler cette question.

Mon Code:

@Pipe({ name: "dataFilter", pure: false })
export class DataFilterPipe implements PipeTransform {
    transform(value: Array<any>, filter: any[]) {
        if (!filter) {
            return value;
        } else if (value) {
            return value.filter(item => {
                for (var i = 0; i < filter.length; i++) {
                    if (filter[i][1] == undefined) {
                        return true;
                    } else if ((typeof item[filter[i][0]] === 'string' || item[filter[i][0]] instanceof String) &&
                        (item[filter[i][0]].toLowerCase().indexOf(filter[i][1]) !== -1)) {
                        return true;
                    }
                    return false;
                }
            });
        }
    }
}

Je suis la transmission des données comme dataFilter : [['column1',value1],['column2',value2],['column3',value3]].

Pourriez-vous fournir un exemple de valeur? Est-il sur la forme: [{col1:"col1",col2:"col2",col3:"col3"},...,{}]?

OriginalL'auteur Jeeten Parmar | 2017-01-16

20

Voici une solution à l'aide de l'objet passé en plusieurs colonnes filtre. Je l'ai trouvé plus pratique de passer d'un tableau 2D:
```
    @Pipe({
        name: 'filter'
    })
    export class FilterPipe implements PipeTransform {
        transform(items: Array<any>, filter: {[key: string]: any }): Array<any> {
            return items.filter(item => {
                let notMatchingField = Object.keys(filter)
                                             .find(key => item[key] !== filter[key]);

                return !notMatchingField; //true if matches all fields
            });
        }
    }
```
Avoir un tableau d'objets avec plusieurs colonnes:
```
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'}
];
```
Et un filtre:
```
this.peopleFilter = {age: 27, sex: 'male'};
```
L'utiliser comme:
```
 <div *ngFor="let person of people | filter: peopleFilter;"></div>
```
Ainsi, deux personnes qui correspondent à nos critères: Jean et Mike.

Ici est le travail plunker: Plusieurs colonnes de filtre tuyau de démonstration.

Permettez-moi de l'essayer..
Lorsque je l'utilise, Il ne montre pas toutes les données, et même je n'ai pas toutes les données quand j'ai de la valeur d'entrée.
Ici, c'est le travail plunker: plnkr.co/modifier/e0PCIsqXumbXe6mAUWBI?p=preview
Merci. Je suis marquage de votre post, comme réponse, mais que faire si il n'y a pas de valeur (alors qu'il doit retourner toutes les valeurs) ou de la valeur est le numéro de quelqu'un d'entrée ?
Merci! Si aucune valeur n'est fournie, dire notre filtre est {}, alors tous les articles seront retournés, sinon, elle correspond à la valeur exacte fournie, ce qui est bien parce que, par exemple, il pourrait y avoir une situation où nous voulons filtrer les colonnes avec des valeurs null ou undefined champ. L'Ofc, c'est un concept, et la solution peut être ajusté convenant à la situation.

OriginalL'auteur Seid Mehmedovic
1

Remplacer Votre code comme ci-dessous,
```
 export class DataFilterPipe implements PipeTransform {
   transform(value: Item[], field: string, args: string): Item[]{
      let filter: string = args ? args.toLocaleLowerCase() : null;
      return filter ? value.filter((item : Item) =>
          Item[field].toLocaleLowerCase().indexOf(filter) != -1) : value;
   }
}
```
Dans la page Html,
```
 <tbody *ngFor="let item of items | dataFilter : columnName : value ">
```
C'est juste pour un paramètre de filtre. J'en ai besoin pour de multiples paramètres.
ce que vous êtes exactement essaie de faire? Filtre avec un seul paramètre de filtre sur plusieurs colonnes ou avec de multiples paramètres de filtre sur une seule colonne?S'il vous plaît, Claire.
Plusieurs filtres sur plusieurs colonnes. Je suis la transmission des données dans le tableau comme [['column1',value1],['column2',value2],['column3',value3]].

OriginalL'auteur Trusha
1

Je suis en supposant que vous avez un tableau avec des colonnes comme ceci:

[{col1:"col1",col2:"col2",col3:"col3"}]

J'ai également omis tous les types de checkin, null-pointeurs et gestion des erreurs. La solution actuelle est un exemple, j'ai essayé avec le tableau:
```
myData:Array<any> = [{col1:"a",col2:"b",col3:"cadd"},
    {col1:"abba",col2:"bobba",col3:"cadd"},
    {col1:"abba",col2:"bobba",col3:"cool"},
    {col1:"a",col2:"bobba",col3:"cool"}];
```
et le tuyau:
```
@Pipe({
  name: 'dataFilter'
})
export class DataFilterPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return value.filter(item =>{
      var matchesAll = true;
      for(var i = 0; i<args.length; i++){
        //check if your data contains the column and the value defined in args.
        if(item.hasOwnProperty(args[i][0]) && item[args[i][0]]==args[i][1]){
          continue;
        }else{ //at least one column did not match,
          matchesAll = false;
        }
      }
      return matchesAll;
    });
  }

}
```
Vous pouvez ensuite appeler

dataFilter.transform(myData,[["col1","abba"],["col2","bobba"],["col3","cool"]]);

afin d'obtenir un résultat, qui est le numéro de ligne 3 après transformation: [{col1:"abba",col2:"bobba",col3:"cool"}].

Remarque: Vous devrez peut-être ajuster les noms des colonnes dans mon exemple, pour le faire fonctionner avec votre code.

EDIT: Avec cette solution, vous pouvez également passer arbitraire nombre de colonnes.

e.g dataFilter.transform(myData,[["col3","cool"]]);

qui se traduira dans les deux dernières lignes (dans mon exemple) après transformation:

[{col1:"abba",col2:"bobba",col3:"cool"},{col1:"a",col2:"bobba",col3:"cool"}]

EDIT: après le commentaire indiquant que le code ne fonctionne pas, j'ai fourni un plunkr de l'exemple ci-dessus: https://plnkr.co/edit/VdpGJWyzWUVFzYNDSz1g

ne t sais pas pourquoi, mais ce n'est pas le travail.
J'ai ajouté un travail plunkr: plnkr.co/modifier/VdpGJWyzWUVFzYNDSz1g jetez un oeil

OriginalL'auteur John

Vous devez vous connecter pour publier un commentaire.