数组 – 如何在angular2中的ngFor中显示1个元素？

发布时间：2020-12-17 07:56:44 所属栏目：安全来源：网络整理

导读：我有一个简单的ngFor循环数组.但是,我添加了一个条件,即索引是 5继续添加标签.之后,我想添加一个额外的标签,只需使用一个下拉列表来查看其余的标签.但它不起作用. li *ngFor="let tag of module.Tags; let i = index" a *ngIf="i5" href="#" class="span-tag

我有一个简单的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按钮< / 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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!