Comment limiter la répétition de ngFor à un certain nombre d'éléments en Angular ?

Question

Mon code :

<li *ngFor="let item of list; let i=index" class="dropdown-item" (click)="onClick(item)">
  <template [ngIf]="i<11">{{item.text}}</template>
</li>

J'essaie de faire en sorte que seuls 10 éléments de liste soient affichés à un moment donné. Comme suggéré dans le répondre ici J'ai utilisé des ngIf, mais le résultat est que des éléments de liste vides (au-delà de 10) apparaissent sur la page.

Answer 1

Cela me semble plus simple

<li *ngFor="let item of list | slice:0:10; let i=index" class="dropdown-item" (click)="onClick(item)">{{item.text}}</li>

Plus proche de votre approche

<ng-container *ngFor="let item of list" let-i="index">
  <li class="dropdown-item" (click)="onClick(item)" *ngIf="i<11">{{item.text}}</li>
</ng-container>

Answer 2

Vous pouvez appliquer directement slice() à la variable. Démonstration de StackBlitz

<li *ngFor="let item of list.slice(0, 10);">
   {{item.text}}
</li>

Answer 3

Par exemple, si nous voulons afficher uniquement les 10 premiers éléments d'un tableau, nous pouvons utiliser la méthode suivante SlicePipe comme ça :

<ul>
     <li *ngFor="let item of items | slice:0:10">
      {{ item }}
     </li>
</ul>

Answer 4

Cela fonctionne très bien :

<template *ngFor="let item of items; let i=index" >
 <ion-slide *ngIf="i<5" >
  <img [src]="item.ItemPic">
 </ion-slide>
</template>

Answer 5

En plus de la réponse de @Gunter, vous pouvez utiliser trackBy pour améliorer les performances. trackBy prend une fonction qui a deux arguments : index et item. Vous pouvez retourner une valeur unique dans l'objet de la fonction. Cela empêchera le re-rendu des éléments déjà affichés dans ngFor. Dans votre html, ajoutez trackBy comme ci-dessous.

<li *ngFor="let item of list; trackBy: trackByFn;let i=index" class="dropdown-item" (click)="onClick(item)">
  <template [ngIf]="i<11">{{item.text}}</template>
</li>

Et écrivez une fonction comme celle-ci dans votre fichier .ts.

trackByfn(index, item) { 
  return item.uniqueValue;
}