Come ottenere le dimensioni di un filtrato (pipe) impostato in angular2

Question

ho scritto il mio tubo di filtro come è sparito in 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)); 
    } 
} 

e usarlo nel mio modello:

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

Ora mi piacerebbe vedere quante corrispondenze ritorna la pipa. Quindi essenzialmente la dimensione dell'array restituito.

In 1.x angolare siamo stati in grado in modo da assegnare il restituite impostata su una variabile in un modello in questo modo:

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

Ma non si può più assegnare le variabili nei modelli in angular2.

Quindi, come si ottiene la dimensione del set filtrato senza chiamare il filtro due volte?

Answer 1

originale

Per quanto ne sappia non esiste attualmente alcun modo per farlo direttamente. Un trucco potrebbe essere quello di aggiungere una variabile modello al contenuto e utilizzare una query ViewChildren(...) per ottenere gli elementi creati e contarli.

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

@ViewChildren('someVar') filteredItems; 

Un approccio alternativo sarebbe quello di passare un riferimento a una variabile contatore al tubo come mostrato in https://plnkr.co/edit/Eqjyt4qdnXezyFvCcGAL?p=preview

aggiornamento (angolare> = 4.0.0)

dal Angular 4*ngFor supporta as

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

che può essere utilizzato nel modello (all'interno dell'elemento che *ngFor viene aggiunto) come

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

Answer 2

non so che cosa esattamente vuole fare con la dimensione e la soluzione del Günter può andare bene I tuoi bisogni.

Detto questo, è possibile iniettare l'istanza del componente nella pipa e impostare direttamente la lunghezza in una proprietà di questo 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 { 
    (...) 
} 

Vai a questa risposta:

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

Spero che ti aiuta, Thierry

Answer 3

Si può semplicemente passare un oggetto dal componente classe per HTML-pipe come secondo argomento. E nella classe class passano la matrice risultante.

Answer 4

È ancora necessario chiamare il filtro per la seconda volta, ma è possibile utilizzarlo direttamente come questo:

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