如何在angular2中的ngFor中显示1个元素? [英] How to show 1 element in ngFor in angular2?
问题描述
我有一个简单的ngFor,它遍历一个数组.但是,我添加了一个条件,即当索引为< 5
时,请继续添加标签.然后,我只想添加一个额外的标签,然后将其用于下拉菜单以查看其余标签.但这不起作用.
I have a simple ngFor that loops through an array. However, I've added a condition that while the index is < 5
keep add the tag. and After that, I want to add an extra tag just once that will be used a dropdown to view the rest of the tags. But it doesn't work.
<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个标签之后有一个按钮,该按钮将用于显示带有下拉菜单的下拉菜单其余标签.
The feature here is that I don't want to show unlimited number of tags to the user, I want to limit it to only 5 tags, and have a button after 5 tags which will be used to show the dropdown with the remaining tags.
在angular2中可以做到吗?
Is this possible to do in 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
要获取所有添加的内容,但要添加第5项之后添加的<div>DropDown Button</div>
,可以使用:
To get all added but the <div>DropDown Button</div>
added after the 5th item you can use:
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>
这篇关于如何在angular2中的ngFor中显示1个元素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!