由于限制过滤器从 Angular 2+ 中消失,我如何为简单的 *ngFor 语句应用限制?
<div *ngFor="#tweet of singleCategory"> {{ tweet }} </div>
我不希望 *ngFor 语句循环遍历 singleCategory 的所有元素,我想将其限制为仅 2 个结果。我相信它可以用自定义管道来完成,但我不知道如何实现它。
谢谢你。
您可以使用索引在元素上应用 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 ) }
还可以选择创建管道。(见链接的副本)