Wie die Größe eines gefilterten (verrohrt) in angular2

Question

gesetzt bekommen, schrieb ich mein eigenes Filterrohr, wie es in angular2 verschwunden:

import {Pipe, PipeTransform} from 'angular2/core'; 

@Pipe({ 
    name: 'myFilter' 
}) 
export class MyFilter implements PipeTransform { 
    transform(customerData: Array<Object>, args: any[]) { 
    if (customerData == undefined) { 
     return; 
    } 
    var re = new RegExp(args[0]); 
    return customerData.filter((item) => re.test(item.customerId)); 
    } 
} 

Und es in meiner Vorlage verwenden:

<tr *ngFor="#singleCustomerData of customerData | myFilter:searchTerm"> 
    ... 
</tr> 

Jetzt würde ich gerne sehen, wie viele Übereinstimmungen die Pipe zurückgibt. Also im Wesentlichen die Größe des zurückgegebenen Arrays.

In Winkel 1.x waren wir in der Lage, so weisen Sie die auf eine Variable in einer Vorlage wie so zurückgegeben:

<div ng-repeat="person in filtered = (data | filter: query)"> 
</div> 

Aber wir können nicht mehr zuweisen Variablen in Vorlagen in angular2.

Also wie bekomme ich die Größe des gefilterten Sets, ohne den Filter zweimal aufzurufen?

Answer 1

original

AFAIK gibt es zur Zeit keine Möglichkeit, dies direkt zu tun. Ein Hack wäre es, dem Inhalt eine Template-Variable hinzuzufügen und eine ViewChildren(...)-Abfrage zu verwenden, um die erstellten Elemente abzurufen und sie zu zählen.

<tr *ngFor="let singleCustomerData of customerData | myFilter:searchTerm" #someVar> 
    ... 
</tr> 
<div>count: {{filteredItems?.length}}</div> 

@ViewChildren('someVar') filteredItems; 

Ein alternativer Ansatz, wie ein Verweis auf eine Zählvariable auf das Rohr in https://plnkr.co/edit/Eqjyt4qdnXezyFvCcGAL?p=preview

Update gezeigt passieren würde (Angular> = 4.0.0)

Seit Angular 4*ngFor unterstützt as

<tr *ngFor="let singleCustomerData of customerData | myFilter:searchTerm as result"> 

, die Sie in der Vorlage (innerhalb des Elements, dass *ngFor zu hinzugefügt wird) verwenden können, wie

<div>{{result?.length}}</div> 

Answer 2

Ich weiß nicht, was Sie genau mit der Größe tun mögen, und die Lösung des Günter kann passen Deine Bedürfnisse.

Das heißt, Sie können die Komponenteninstanz in Ihre Rohrleitung injizieren und direkt die Länge in eine Eigenschaft dieser Komponente setzen.

@Pipe({ 
    name: 'dump' 
}) 
export class DumpPipe { 
    constructor(@Inject(forwardRef(() => AppComponent)) app:AppComponent) { 
    this.app = app; 
    } 

    transform(array: Array<string>, args: string): Array<string> { 
    (...) 
    this.app.filteredItemLength = array.length; 

    return array; 
    } 
} 

@Component({ 
    (...) 
}) 
export class AppComponent { 
    (...) 
} 

Siehe diese Antwort:

• How to save model manipulation of *ngFor with pipes? - "#item of (result = (items | orderAsc))" doesn't work in A2.

Hoffe, es hilft Ihnen, Thierry

Answer 3

Sie können einfach ein Objekt aus der Klasse Komponente HTML-Rohr als zweites Argument übergeben. Und in der Klasse Pipe übergeben Sie das resultierende Array.

Answer 4

Sie müssen noch das Filter ein zweites Mal anrufen, aber Sie können es direkt wie folgt verwenden:

{{ (customerData | myFilter:searchTerm)?.length }}