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將顯示在陣列中更多的項目。沒有複製數組和其他東西。