在 Angular 2 中，*ngFor 是一个常用的指令，用于循环遍历数组并生成相应的 HTML 元素。然而，在某些情况下，我们可能需要限制循环次数或者只显示数组中的前几个元素。本文将介绍如何在 *ngFor 中应用限制。
使用 slice 方法
一种简单的方法是使用 JavaScript 数组的 slice 方法来限制数组的范围。例如，如果我们想要在一个列表中只显示前三个元素，可以这样写：
<ul>
<li *ngFor="let item of items.slice(0, 3)">{{item}}</li>
</ul>这里的 slice 方法接受两个参数，第一个参数是起始位置，第二个参数是截止位置。注意，截止位置不包括在内，所以 slice(0, 3) 取出的是数组的前三个元素。
使用 ng-container 和 ngIf
另一种方法是使用 ng-container 和 ngIf 指令。ng-container 是一个无任何影响的容器，可以用来包装其他元素。我们可以通过在 ng-container 上设置属性来控制其是否显示。具体实现如下：
<ul>
<ng-container *ngFor="let item of items; let i=index">
<li *ngIf="i<3">{{item}}</li>
</ng-container>
</ul>这里我们使用了 ngFor 的 index 变量来判断循环次数，只有当 index 小于 3 时才显示当前元素。由于 ng-container 不会被渲染到 DOM 中，因此可以避免出现多余的容器元素。
使用 NgxPagination
如果需要更强大的分页功能，可以使用第三方库 NgxPagination。该库提供了一个分页组件和一些相关的指令和服务，用于快速实现分页功能。具体使用方法可以参考官方文档：https://www.npmjs.com/package/ngx-pagination。
<ul>
<li *ngFor="let item of items | paginate: { itemsPerPage: 10, currentPage: p }">{{item}}</li>
</ul>
<pagination-controls (pageChange)="p = $event"></pagination-controls>这里我们将 items 数组通过管道符传递给 paginate 指令，并设置每页显示 10 条记录。同时，我们使用 pagination-controls 组件来显示页码，并通过 pageChange 事件监听用户翻页操作。注意，p 是一个变量，用来存储当前页码。
总结
本文介绍了三种在 *ngFor 中应用限制的方法，包括使用 slice 方法、ng-container 和 ngIf 指令以及第三方库 NgxPagination。不同的方法适用于不同的场景，根据实际情况选择合适的方法可以提高开发效率并改善用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31235
