Comment appeler un tuyau 2 angulaire avec plusieurs arguments ?

Question

Je sais que je peux appeler un tuyau comme ceci :

Ici le tuyau date prend un seul argument. Quelle est la syntaxe pour appeler un tuyau avec plus de paramètres, du modèle du composant HTML et directement dans le code ?

Answer 1

Dans votre composant de modèle vous pouvez utiliser plusieurs arguments en les séparant avec des virgules:

{{ myData | myPipe: 'arg1':'arg2':'arg3'... }}

À partir de votre code, il ressemblera à ceci:

new MyPipe().transform(myData, arg1, arg2, arg3)

Et dans votre fonction de transformation à l'intérieur de votre conduite, vous pouvez utiliser les arguments comme ceci:

export class MyPipe implements PipeTransform {    
    transform(value:any, arg1:any, arg2:any, arg3:any):any {
}

Beta 16 et avant (2016-04-26)

Les tuyaux de prendre un tableau qui contient tous les arguments, si vous avez besoin de les appeler comme ceci:

new MyPipe().transform(myData, [arg1, arg2, arg3...])

Et votre fonction de transformation ressemblera à ceci:

export class MyPipe implements PipeTransform {    
        transform(value:any, args:any[]):any {
                var arg1 = args[0];
                var arg2 = args[1];
                ...
        }

Answer 2

Il vous manque la conduite réelle.

Plusieurs paramètres peuvent être séparées par un deux-points ( :).

Également vous pouvez enchaîner les pipes, comme suit :

Answer 3

Depuis la beta.16 les paramètres ne sont pas transmises sous forme de tableau à l' transform() méthode plus mais plutôt comme des paramètres individuels:

{{ myData | date:'fullDate':'arg1':'arg2' }}


export class DatePipe implements PipeTransform {    
  transform(value:any, arg1:any, arg2:any):any {
        ...
}

https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta16-2016-04-26

pipes prendre un nombre variable d'arguments, et non pas un tableau qui contient tous les arguments.

Answer 4

J'utilise des Tubes Angulaire 2+ pour filtrer les tableaux d'objets. Le suivant prend filtre multiples arguments, mais vous pouvez envoyer un seul si cela convient à vos besoins. Voici une Plunker Exemple. Il va trouver les touches que vous souhaitez pour le filtre et les filtres par la valeur que vous fournissez. C'est en fait assez simple, si cela semble compliqué qu'il ne l'est pas, découvrez la Plunker Exemple.

*Veuillez noter que, dans une réponse ci-dessus Gunter états que les tableaux ne sont plus utilisés comme filtre des interfaces, mais j'ai cherché sur le lien qu'il donne et n'a rien trouvé parlant de la réclamation. Aussi, le Plunker exemple que j'ai fourni montre ce code fonctionne comme prévu dans Angulaire 5.2. Il va travailler dans Angulaire 2+.

Voici la Pipe d'être appelé dans un *ngFor directive,

<div *ngFor='let item of items | filtermulti: [{title:"mr"},{last:"jacobs"}]' >
  Hello {{item.first}} !
</div>

Voici la 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 ici est 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" }
  ];
}

Plunker Exemple

GitHub Exemple: Fourche une copie de travail de cet exemple

Espérons que cela aide quelqu'un. Amusez-Vous Bien :-)