如何在angular2中显示ngFor中的一个元素?

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.

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

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.

这里的特性是，我不希望向用户显示无限数量的标签，我希望将其限制在5个标签之后，并在5个标签之后设置一个按钮，用于显示剩余标签的下拉菜单。

Is this possible to do in angular2?

这在angular2有可能吗?

If so, please enlighten me.

如果是的话，请启发我。

1 个解决方案

#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

https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html

To get all added but the <div>DropDown Button</div> added after the 5th item you can use:

除

下拉按钮

在第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>