Как показать 1 элемент в ngFor в angular2?

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> добавлено после 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>