Angular4 - Afficher les 5 éléments suivants dans le tableau par clic

Question

J'ai un tableau rempli d'émissions de télévision. Les émissions de télévision que j'ai regardées récemment:

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

Comme vous pouvez le voir, le tableau contient plus de 5 éléments. Donc, je l'ai fait pour ne montrer que 5 émissions de télévision:

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

Maintenant, je veux avoir un simple bouton pour afficher les 5 éléments dans le tableau avec mes 5 articles actuels. Évidemment, la liste s'allonge en fonction des éléments du tableau, mais le principe est de montrer le prochain 5. Le problème est, je ne sais pas comment charger les 5 prochains éléments de mon tableau. Aussi, si je n'ai pas 5 (parce qu'il y a 7 items dans le tableau par exemple), alors je veux quand même montrer le reste du tableau. J'ai essayé de montrer plus d'articles en imprimant le tableau, mais ensuite il montre seulement les 5 premiers articles encore, ce qui a un sens, je suppose. Est-ce que quelqu'un sait comment s'attaquer à ce problème?

Answer 1

Peut-être quelque chose comme ceci:

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

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

mise donc max montrera plus d'éléments dans le tableau. Sans copier tableau et autres choses.