Jak mogę ograniczyć powtarzanie ngFor do pewnej liczby elementów w Angular?

Question

mój kod:

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

Staram się mieć tylko 10 elementów listy wyświetlania w dowolnym momencie. Jak zasugerowałem w answer here, użyłem ngIf, ale powoduje to wyświetlenie pustych elementów listy (powyżej 10) na stronie.

dziękuję!

Answer 1

To wydaje mi się prostsze

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

Bliżej swoim podejściu

<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

To działa bardzo dobrze:

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