如何限制ngFor重复到Angular中的一些项目？

Question

我的代码:

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

我试图在任何点上只显示10个列表元素.正如在这里的答案中所建议的那样,我使用了ngIf但这导致在页面上显示空列表项(超过10).

Answer 1

这对我来说似乎更简单

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

更接近你的方法

<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

您可以直接应用于slice()变量。StackBlitz 演示

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

Answer 3

例如，假设我们只想显示数组的前 10 项，我们可以使用SlicePipe来做到这一点，如下所示：

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

Answer 4

*ngFor您可以通过应用三元运算符来动态限制。

示例 1 -

<div *ngFor="let item of (showAllFlag ? list : list.slice(0,2))" >
</div>

Answer 5

这非常有效：

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