如何将数量限制应用于*ngFor？

Question

由于限制过滤器已从Angular 2+中删除,如何对简单的*ngFor语句应用限制？

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

我不希望*ngFor语句循环遍历singleCategory的所有元素,我想将其限制为仅2个结果.我相信可以使用Custom Pipes完成,但我不知道如何实现它.

谢谢.

Answer 1

您可以使用索引在元素上应用ngIf:

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

如果您不想要包装div,请查看模板语法:

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

首先,您可以首先使用过滤器过滤组件中的元素,以防止在显示数据时出现不必要的循环:

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

还可以选择创建管道.(见链接副本)