Angular 2 *ngFor compte les éléments en dehors de la boucle

Question

Je suis un novice en angular et j'ai un problème stupide, comment puis-je montrer le nombre réel d'éléments en dehors de la boucle *ngFor ?

J'utilise des filtres et des tuyaux de pagination comme suit

*ngFor="let item of items| filterBy: ['name','category']: queryString | paginate: config; let i = index; let c = count"

Je sais qu'il y a une variable "count" mais bien sûr elle n'est disponible que dans cette boucle, comment puis-je obtenir cette variable dans le composant, dois-je créer un nouveau composant, le placer dans cette boucle et passer "count" par des directives ou y a-t-il une autre façon plus simple et plus propre ?

Answer 1

L'utilisation de RxJS Subject a fonctionné pour moi.

Dans le composant, créez une variable qui contiendra le compte, c'est-à-dire filterCount et créez un fichier RxJS Subject pour le type number . Avoir subscription pour se désinscrire de la liste des Observable sur OnDestroy

filterCount = 0;
filteredCountSubject = new Subject<number>();
subscription: Subscription;

s'abonner à la filteredCountSubject sur OnInit le crochet du cycle de vie.

ngOnInit(): void {
    this.subscription = this.filteredCountSubject.subscribe((count) => {
        this.filterCount = count;
    });
}

Dans Template, vous pouvez afficher le décompte à l'aide de filterCount où vous le souhaitez dans le modèle. en utilisant

<div>{{filterCount}}</div>

Et envoyez le filteredCountSubject en tant que paramètre de la filterBy tuyau.

<div *ngFor="let item of items| filterBy: ['name','category']: queryString: filteredCountSubject  | paginate: config; let i = index; let c = count"></div>

En transform de la méthode filterBy tuyau, faire filteredCountSubject.next avec le nombre de tableaux filtrés, c'est-à-dire

transform(items: Array<any>, filterConfig: FilterCofig): Array<any> {
    // Arguments sent from HTML.
    const args = arguments;

    // CODE TO FILTER ITEMS BASED ON PARAMETERS.

    // Get the "filterredCountSubj" from arguments.
    // Remember that the argument index of "filteredCountSubject" is 3. As "items" is first argument.
    const filterredCountSubj = args[3];
    if (filterredCountSubj) {
        filterredCountSubj.next(items.length);
    }
    return items;
}

J'espère que cela vous aidera.