web-dev-qa-db-fra.com

Comment puis-je appliquer une limite de quantité à * ngFor?

Étant donné que le filtre Limite a disparu de Angular 2+, comment puis-je appliquer une limite à une simple instruction * ngFor?

<div *ngFor="#Tweet of singleCategory">
  {{ Tweet }}
</div>

Je ne veux pas que l'instruction * ngFor parcourt tous les éléments de singleCategory, je veux la limiter à 2 résultats. Je pense que cela pourrait être fait avec des pipes personnalisées mais je ne sais pas comment le mettre en œuvre.

Je vous remercie.

javascriptangular
51
Hossam Mourad

Vous pouvez soit appliquer un ngIf sur l'élément à l'aide de l'index:

<div *ngFor=" let Tweet of singleCategory;  let i=index">
    <div *ngIf="i<2">
        {{Tweet}}
    </div>
</div>

Si vous ne voulez pas le div d'emballage, consultez syntaxe du modèle :

<ng-template ngFor let-Tweet [ngForOf]="singleCategory" let-i="index">
    <div [ngIf]="i<2">
        {{Tweet}}
    </div>
</ng-template>

De préférence, vous filtrez d'abord/à la place les éléments de votre composant en utilisant un filtre pour éviter les boucles inutiles lors de l'affichage de vos données:

public get singleCategory() {
   return this.categories.filter((item, index) => index > 2 )
}

Il existe également la possibilité de créer un tuyau. (Voir le duplicata lié)

81
sqwk