由于限制过滤器已从Angular 2+中删除,如何对简单的* ngFor语句应用限制?
<div *ngFor="#tweet of singleCategory">
{{ tweet }}
</div>
我不希望* ngFor语句循环遍历singleCategory的所有元素,我想将其限制为仅2个结果。我相信可以使用Custom Pipes完成,但我不知道如何实现它。
谢谢。
答案 0 :(得分:75)
您可以使用索引在元素上应用ngIf:
<div *ngFor=" let tweet of singleCategory; let i=index">
<div *ngIf="i<2">
{{tweet}}
</div>
</div>
如果您不想要包装div,请查看template syntax:
<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 )
}
还可以选择创建管道。 (参见链接的副本)