Angular4 - 通过点击显示接下来的5个项目

Question

我有一个阵列充满了电视节目。我最近观看的电视节目：

tvShows = ['Firefly', 'Fargo', 'Game of Thrones', 'Breaking Bad', 'The Sopranos', 'House of Cards', '* 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将显示在阵列中更多的项目。没有复制数组和其他东西。