filter - crear - Cómo obtener el tamaño de un conjunto filtrado(entubado) en angular2

filter pipe angular 6

Question

Escribí mi propio tubo de filtro como 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 utilízalo en mi plantilla:

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

Ahora me gustaría ver cuántos partidos devuelve la tubería. Así que, esencialmente, el tamaño de la matriz devuelta.

En angular 1.x pudimos asignar el conjunto devuelto a una variable en una plantilla de la siguiente 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 dos veces al filtro?

Answer 1

Aún debe llamar al filtro por segunda vez, pero puede usarlo directamente así:

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

Answer 2

La respuesta de Gunter está en la dirección correcta, le falta solo la información sobre cómo usar el resultado fuera del bucle * ngFor. Una posible solución es incluir el * 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 para esta pista van a la siguiente publicación:

https://netbasal.com/using-pipe-results-in-angular-templates-430683fa2213

Answer 3

No sé qué es exactamente lo que quiere hacer con el tamaño y la solución de Günter puede satisfacer sus necesidades.

Dicho esto, puede inyectar la instancia del componente en su tubería y establecer directamente la longitud en una propiedad de este componente.

@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 {
(...)
}

Vea esta respuesta:

• ¿Cómo guardar la manipulación del modelo de * ngFor con tuberías? - "#item of (result = (items | orderAsc))" no funciona en A2 .

Espero te ayude, Thierry

Answer 4

Simplemente puede pasar un objeto del componente de clase a la canalización HTML como segundo argumento. Y en la tubería de la clase pasa la matriz resultante.

Answer 5

original

AFAIK actualmente no hay manera de hacer esto directamente. Un truco sería agregar una variable de plantilla al contenido y usar una consulta de 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 tubería como se muestra en https://plnkr.co/edit/Eqjyt4qdnXezyFvCcGAL?p=preview

actualización (Angular> = 4.0.0)

Desde Angular 4 *ngFor soporta 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>