我有一个循环遍历数组的简单 ngFor。但是,我添加了一个条件,即索引为 < 5
继续添加标签。在那之后,我想添加一个额外的标签一次,将使用下拉列表来查看其余标签。但它不起作用。
<li *ngFor="let tag of module.Tags; let i = index">
<a *ngIf="i<5" href="#" class="span-tag tag">{{ tag }}</a>
<div *ngIf="module.Tags.length > 5 && i == 6">DropDown Button</div>
</li>
这里的特点是我不想向用户显示无限数量的标签,我想将其限制为仅 5 个标签,并在 5 个标签之后有一个按钮,用于显示带有剩余标签。
这在 angular2 中可以做到吗?
如果是,请赐教。
最佳答案
<li *ngFor="let tag of module.Tags | slice:0:5; let last=last">
<a href="#" class="span-tag tag">{{ tag }}</a>
<div *ngIf="last">DropDown Button</div>
</li>
https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html
要添加除<div>DropDown Button</div>
以外的所有内容在您可以使用的第 5 项之后添加:
show = 5;
<li *ngFor="let tag of module.Tags|slice:0:show let i=index">
<a href="#" class="span-tag tag">{{ tag }}</a>
<div *ngIf="i==4 && show == 5" (click)="show = module.Tags.length">DropDown Button</div>
</li>
关于arrays - 如何在 angular2 的 ngFor 中显示 1 个元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42458664/