Comment obtenir la taille d'un ensemble filtré (canalisé) dans angular2
J'ai écrit mon propre tuyau de filtre car il a disparu dans 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));
}
}
Et l'utiliser dans mon modèle:
<tr *ngFor="#singleCustomerData of customerData | myFilter:searchTerm">
...
</tr>
Maintenant, j'aimerais voir combien de correspondances le tuyau retourne. Donc essentiellement la taille du tableau retourné.
Dans l'angle 1.x nous avons pu ainsi assigner l'ensemble retourné à une variable dans un modèle comme ceci:
<div ng-repeat="person in filtered = (data | filter: query)">
</div>
Mais nous ne pouvons plus assigner de variables dans les modèles dans angular2.
Alors, comment puis-je obtenir la taille de l'ensemble filtré sans appeler le filtre deux fois?
5 réponses
Original
AFAIK il n'y a actuellement aucun moyen de le faire directement. Un hack serait d'ajouter une variable de modèle au contenu et d'utiliser une requête ViewChildren(...) pour obtenir les éléments créés et les Compter.
<tr *ngFor="let singleCustomerData of customerData | myFilter:searchTerm" #someVar>
...
</tr>
<div>count: {{filteredItems?.length}}</div>
@ViewChildren('someVar') filteredItems;
Une autre approche serait de passer une référence à une variable de compteur au tuyau comme indiqué dans https://plnkr.co/edit/Eqjyt4qdnXezyFvCcGAL?p=preview
Mise À Jour (Angulaire >=4.0.0)
Depuis Angulaire 4 *ngFor prend en charge as
<tr *ngFor="let singleCustomerData of customerData | myFilter:searchTerm as result">
, Qui vous pouvez utiliser dans le modèle (à l'intérieur de l'élément de *ngFor est ajouté) comme
<div>{{result?.length}}</div>
Vous devez toujours appeler le filtre une deuxième fois, mais vous pouvez l'utiliser directement comme ceci :
{{ (customerData | myFilter:searchTerm)?.length }}
Je ne sais pas exactement ce que vous voulez faire avec la taille et la solution de Günter peut répondre à vos besoins.
Cela dit, Vous pouvez injecter l'instance du composant dans votre tuyau et définir directement la longueur dans une propriété de ce composant.
@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 {
(...)
}
Voir cette réponse:
Espère que cela vous aide, Thierry
La réponse de Gunter est dans la bonne direction, il ne manque que les informations sur la façon d'utiliser le résultat de la boucle * ngFor. Une solution possible est d'enfermer le * ngFor dans une directive plus large, comme ceci:
<ng-directive *ngIf='customerData | myFilter:searchTerm as filteredItems'>
<tr *ngFor="let singleCustomerData of filteredItems">
...
</tr>
<div>count: {{filteredItems.length}}</div>
</ng-directive>
Les crédits pour cet indice vont au post suivant:
Https://netbasal.com/using-pipe-results-in-angular-templates-430683fa2213
Vous pouvez simplement passer un objet du composant de classe à HTML-pipe comme deuxième argument. Et dans le tuyau de classe passer le tableau résultant.