Angular5表格分页遇阻：ngx-pagination导入报错求助

你遇到的这个错误核心原因是版本兼容性问题——最新版的ngx-pagination已经不再支持Angular5了，直接安装会导致模块无法被解析。下面是一步步的解决办法：

1. 安装兼容Angular5的ngx-pagination版本 #

首先卸载当前可能安装的不兼容版本（如果已经装过）：

npm uninstall ngx-pagination

然后安装经过验证、支持Angular5的指定版本（3.2.1版本可以完美适配Angular5）：

npm install ngx-pagination@3.2.1 --save

2. 正确导入NgxPaginationModule #

打开你的app.module.ts（或者你使用表格的对应功能模块），导入并添加到imports数组中：

import { NgxPaginationModule } from 'ngx-pagination';

@NgModule({
  imports: [
    // 其他已有的模块
    NgxPaginationModule
  ]
})
export class AppModule { }

3. 修改表格代码实现分页 #

更新你的表格模板，添加分页管道和分页控件：

<table>
  <tr *ngFor="let x of names | paginate: { itemsPerPage: 10, currentPage: p }">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

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

然后在对应的组件类中定义分页变量：

export class YourComponent {
  p: number = 1; // 当前页码，默认从1开始
  names: any[] = []; // 你的数据数组
}

额外提示 #

• 确保你的Angular CLI版本也是适配Angular5的（建议用@angular/cli@1.7.x版本），避免其他兼容性问题。
• 如果还是有导入错误，可以尝试删除node_modules和package-lock.json，重新执行npm install。

内容的提问来源于stack exchange，提问作者Kumail Hussain