小编mus*_*e10的帖子

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

我有一个充满电视节目的数组。我最近看的电视节目:

tvShows = ['Firefly', 'Fargo', 'Game of Thrones', 'Breaking Bad', 'The Sopranos', 'House of Cards', 'Prison Break'];
Run Code Online (Sandbox Code Playgroud)

正如您所看到的,该数组包含超过 5 个项目。所以我这样做是为了只显示 5 个电视节目:

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

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

arrays items angular

3
推荐指数
1
解决办法
2571
查看次数

标签 统计

angular ×1

arrays ×1

items ×1