Escribí mi propia tubería de filtro cuando desapareció en angular2:
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)); } }Y usarlo en mi plantilla:
<tr *ngFor="#singleCustomerData of customerData | myFilter:searchTerm"> ... </tr>Ahora me gustaría ver cuántas coincidencias devuelve la tubería. Básicamente, el tamaño de la matriz devuelta.
En angular 1.x pudimos asignar el conjunto devuelto a una variable en una plantilla de esta manera:
<div ng-repeat="person in filtered = (data | filter: query)"> </div>Pero ya no podemos asignar variables en plantillas en angular2.
Entonces, ¿cómo obtengo el tamaño del conjunto filtrado sin llamar al filtro dos veces?
Todavía debe llamar al filtro por segunda vez, pero puede usarlo directamente así:
{{ (customerData | myFilter:searchTerm)?.length }}original
AFAIK actualmente no hay forma de hacer esto directamente. Un truco sería agregar una variable de plantilla al contenido y usar una ViewChildren(...) para obtener los elementos creados y contarlos.
<tr *ngFor="let singleCustomerData of customerData | myFilter:searchTerm" #someVar> ... </tr> <div>count: {{filteredItems?.length}}</div> @ViewChildren('someVar') filteredItems;Un enfoque alternativo sería pasar una referencia a una variable de contador a la canalización como se muestra en https://plnkr.co/edit/Eqjyt4qdnXezyFvCcGAL?p=preview
actualizar (Angular> = 4.0.0)
Dado que Angular 4 *ngFor admite as
<tr *ngFor="let singleCustomerData of customerData | myFilter:searchTerm as result"> que puede usar en la plantilla (dentro del elemento al que se agrega *ngFor ) como
<div>{{result?.length}}</div>La respuesta de Gunter está en la dirección correcta, solo le falta la información sobre cómo usar el resultado del bucle * ngFor. Una posible solución es incluir *ngFor en una directiva más amplia, como la siguiente:
<ng-directive *ngIf='customerData | myFilter:searchTerm as filteredItems'> <tr *ngFor="let singleCustomerData of filteredItems"> ... </tr> <div>count: {{filteredItems.length}}</div> </ng-directive>Los créditos por esta sugerencia van a la siguiente publicación:
https://netbasal.com/using-pipe-results-in-angular-templates-430683fa2213