如何在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

要獲得所有添加的內容，但要在第五項之后添加<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>