Angular4 - 通过点击显示数组中的下 5 个项目

Question

我有一个装满电视节目的数组。最近看的电视剧：

tvShows = ['Firefly', 'Fargo', 'Game of Thrones', 'Breaking Bad', 'The Sopranos', 'House of Cards', 'Prison Break'];

如您所见，该数组包含超过 5 个项目。所以我这样做是为了只显示 5 个电视节目：

<div class="tvShow_row" *ngFor="let tvShowName of (tvShows | slice:tvShows.length - 5)">
    <span class="tvShow_name">{{tvShowName}}</span>
</div>

现在，我想要一个简单的按钮来显示数组中接下来的 5 个项目以及我当前的 5 个项目。显然，列表会根据数组中的项目变长，但原则是显示接下来的 5 个。问题是，我不知道如何从我的数组中加载接下来的 5 个项目。另外，如果我没有 5（例如因为数组中有 7 个项目），那么我仍然想显示数组的其余部分。我尝试通过打印数组来显示更多项目，但它只再次显示前 5 个项目，我想这是有道理的。有人知道如何解决这个问题吗？

Answer 1

也许是这样的：

*ngFor="let item of items | slice:0:[max]"

toggle(): void {
  this.max = this.max + 5;
}

所以设置max会在数组中显示更多的项目。没有复制数组和其他东西。

Angular4 - 通过点击显示数组中的下 5 个项目

Angular4 - Show next 5 items in array through click

arrays

angular

next

items