如何限制ngFor重复到Angular中的某些项目? [英] How can I limit ngFor repeat to some number of items in Angular?
本文介绍了如何限制ngFor重复到Angular中的某些项目?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的代码:
<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)
I am trying to have only 10 list elements display at any point. As suggested in the answer here, I used ngIf but this results in empty list items (beyond 10) showing up on the page.
推荐答案
对我来说,这似乎更简单
This seems simpler to me
<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>
这篇关于如何限制ngFor重复到Angular中的某些项目?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文