web-dev-qa-db-fra.com

Comment appeler un canal Angular 2 avec plusieurs arguments?

Je sais que je peux appeler un tuyau comme celui-ci:

{{ myData | date:'fullDate' }}

Ici, le tuyau de date ne prend qu'un argument. Quelle est la syntaxe pour appeler un canal contenant plus de paramètres, à partir du modèle HTML du composant et directement dans le code?

javascriptangularangular2-pipe
146
Eran Shabi

Dans le modèle de votre composant, vous pouvez utiliser plusieurs arguments en les séparant par des deux points:

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

À partir de votre code, cela ressemblera à ceci:

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

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

export class MyPipe implements PipeTransform { 
    // specify every argument individually   
    transform(value: any, arg1: any, arg2: any, arg3: any): any { }
    // or use a rest parameter
    transform(value: any, ...args: any[]): any { }
}

Bêta 16 et avant (2016-04-26)

Les pipes prennent un tableau qui contient tous les arguments, vous devez donc 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];
        ...
    }
}
304
Eran Shabi

Vous manquez le tuyau réel.

{{ myData | date:'fullDate' }}

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

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

Vous pouvez aussi chaîner des tuyaux, comme ceci:

{{ myData | date:'fullDate' | myPipe:'arg1':'arg2':'arg3' }}
34
Eugene

Depuis la version 16, les paramètres ne sont plus transmis en tant que tableau à la méthode transform(), mais en tant que 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

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

22
Günter Zöchbauer

J'utilise Pipes dans Angular 2+ pour filtrer des 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 de StackBlitz . Il trouvera les clés que vous souhaitez filtrer, puis les filtre en fonction de la valeur fournie. C'est en fait assez simple, si cela semble compliqué ce n'est pas le cas, consultez le Exemple de 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 tuyau, 

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éer une copie de travail de cet exemple ici

* Veuillez noter que, dans une réponse fournie par Gunter, Gunter déclare que les tableaux ne sont plus utilisés en tant qu'interfaces de filtrage, mais j'ai recherché le lien qu'il a fourni et rien trouvé. parler à cette revendication. En outre, l'exemple StackBlitz fourni montre que ce code fonctionne comme prévu dans Angular 6.1.9. Cela fonctionnera dans Angular 2+.

Bonne codage :-)

5
user3777549

Étendu à partir de: ser3777549

Filtre à valeurs multiples sur un ensemble de données (référence à la clé de titre uniquement)

HTML

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

filtreMultiple

args.forEach(function (filterobj) {
    console.log(filterobj)
    let filterkey = Object.keys(filterobj)[0];
    let filtervalue = filterobj[filterkey];
    myobjects.forEach(function (objectToFilter) {

      if (!filtervalue.some(x=>x==objectToFilter[filterkey]) && filtervalue != "") {
        // object didn't match a filter value so remove it from array via filter
        returnobjects = returnobjects.filter(obj => obj !== objectToFilter);
      }
    })
  });
0
Sharan