如何在angular 4 ngx分页中显示每页记录

在Angular 4 ngx分页中显示每页记录，可以按照以下步骤进行操作：

1. 首先，确保已经安装了ngx-pagination模块。可以通过以下命令进行安装：

npm install ngx-pagination --save

1. 在需要使用分页的组件中，导入ngx-pagination模块：

import { NgxPaginationModule } from 'ngx-pagination';

1. 在组件的NgModule中，将NgxPaginationModule添加到imports数组中：

@NgModule({
  imports: [
    NgxPaginationModule
  ],
  ...
})
export class YourComponentModule { }

1. 在组件的HTML模板中，使用ngx-pagination指令来显示分页控件和每页记录：

<div *ngFor="let item of items | paginate: { itemsPerPage: 10, currentPage: p }">
  <!-- 显示每页记录的内容 -->
  {{ item }}
</div>

<!-- 显示分页控件 -->
<pagination-controls (pageChange)="p = $event"></pagination-controls>

在上述代码中，items是一个包含所有记录的数组，p是当前页码。通过管道操作符|和paginate指令，可以实现分页功能。itemsPerPage属性指定每页显示的记录数，currentPage属性指定当前页码。

以上是在Angular 4 ngx分页中显示每页记录的基本步骤。根据具体需求，你可以根据ngx-pagination的文档进一步定制分页样式和功能。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云产品：云服务器（CVM）- https://cloud.tencent.com/product/cvm
• 腾讯云产品：云数据库 MySQL 版 - https://cloud.tencent.com/product/cdb_mysql
• 腾讯云产品：云存储（COS）- https://cloud.tencent.com/product/cos
• 腾讯云产品：人工智能 - https://cloud.tencent.com/product/ai
• 腾讯云产品：物联网 - https://cloud.tencent.com/product/iotexplorer
• 腾讯云产品：区块链 - https://cloud.tencent.com/product/baas
• 腾讯云产品：音视频服务 - https://cloud.tencent.com/product/tcvs
• 腾讯云产品：元宇宙 - https://cloud.tencent.com/product/tc3d