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

Question

我有一个循环遍历数组的简单 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 中可以这样做吗？

如果是，请赐教

Answer 1

<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> 之外的所有内容，您可以使用：

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 个元素？

How to show 1 element in ngFor in angular2?

arrays

tags

angular-ng-if

ngfor

angular