Wie rufe ich eine Angular 2 Pipe mit mehreren Argumenten auf?

Question

Ich weiß, dass ich ein Rohr wie folgt aufrufen können:

{{ myData | date:'fullDate' }} 

Hier wird das Datum Rohr nur ein Argument. Wie lautet die Syntax zum Aufrufen einer Pipe mit mehr Parametern, vom HTML-Code der Komponente und direkt im Code?

Answer 1

In Vorlage Ihrer Komponente können Sie mehrere Argumente verwenden, indem man sich mit Doppelpunkten Trennung:

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

aus dem Code wird wie folgt aussehen:

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

Und in der Transformationsfunktion in Ihrem Rohr Sie können die folgenden Argumente verwenden:

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

Beta 16 und vor (2016-04-26)

Pipes nehmen ein Array, das alle Argumente enthält, so dass man sie so nennen müssen:

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

Und Ihre Transformationsfunktion wird wie folgt aussehen :

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

Answer 2

Sie vermissen die eigentliche Rohrleitung.

{{ myData | date:'fullDate' }} 

Mehrere Parameter können durch einen Doppelpunkt (:) getrennt werden.

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

Sie können auch Kettenleitungen, etwa so:

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

Answer 3

Da beta.16 die Parameter nicht als Array auf die transform() Methode mehr weitergegeben, sondern als einzelne Parameter:

{{ 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 nehmen jetzt eine variable Anzahl von Argumenten und kein Array, das alle Argumente enthält.

Answer 4

Ich benutze Pipes in Angular 2+, um Arrays von Objekten zu filtern. Im Folgenden werden mehrere Filterargumente verwendet, Sie können jedoch nur einen senden, wenn dies Ihren Anforderungen entspricht. Hier ist ein Plunker Example. Es wird nach den Schlüsseln suchen, nach denen Sie filtern möchten, und dann nach dem von Ihnen angegebenen Wert filtern. Es ist eigentlich ziemlich einfach, wenn es kompliziert klingt, ist es nicht, schau dir die Plunker Example an.

* Bitte beachten Sie, die über Gunter in einer Antwort heißt es, dass Arrays mehr als Filter Schnittstellen werden nicht verwendet, aber ich suchte den Link er sieht und findet diese Behauptung nichts sprechen. Auch das von mir bereitgestellte Plunker-Beispiel zeigt, dass dieser Code in Angular 5.2 wie vorgesehen funktioniert. Es wird in Angular 2+ funktionieren.

Hier ist das Rohr in einer * ngFor Richtlinie ist das Rohr, Und hier

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; 
    } 
    } 
} 

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

hier genannt wird, ist die Komponente, das Objekt zu Filter enthält ,

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 Example

GitHub Example: Fork a working copy of this example here

Hoffentlich hilft dies jemand. Happy Coding :-)