Angular动态表格ngx-pagination异常问题排查及示例请求

我有两个支持动态添加行的表格，用下拉框控制每页显示行数，通过ngx-pagination实现分页。现在遇到个奇怪的问题：第一个表格的分页组件只有在给第二个表格添加行之后才会显示，而且显示效果还不正常。下面附上相关的TypeScript、HTML和CSS代码，麻烦帮忙解决这个分页问题，或者推荐一些靠谱的Angular分页实现示例。

相关代码 #

TypeScript 代码

// 示例代码框架，根据实际情况调整
import { Component } from '@angular/core';

@Component({
  selector: 'app-table-pagination',
  templateUrl: './table-pagination.component.html',
  styleUrls: ['./table-pagination.component.css']
})
export class TablePaginationComponent {
  table1Data: any[] = [];
  table2Data: any[] = [];
  currentPage = 1; // 注意：这里如果共用会出问题！
  itemsPerPage = 5;

  addRowToTable1() {
    this.table1Data.push({ id: this.table1Data.length + 1, name: `Item ${this.table1Data.length + 1}` });
  }

  addRowToTable2() {
    this.table2Data.push({ id: this.table2Data.length + 1, name: `Item ${this.table2Data.length + 1}` });
  }
}

HTML 代码

<div class="table-container">
  <h3>表格1</h3>
  <button (click)="addRowToTable1()">添加行</button>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>名称</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of table1Data | paginate: { itemsPerPage: itemsPerPage, currentPage: currentPage, totalItems: table1Data.length }">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
      </tr>
    </tbody>
  </table>
  <pagination-controls (pageChange)="currentPage = $event"></pagination-controls>
</div>

<div class="table-container">
  <h3>表格2</h3>
  <button (click)="addRowToTable2()">添加行</button>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>名称</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of table2Data | paginate: { itemsPerPage: itemsPerPage, currentPage: currentPage, totalItems: table2Data.length }">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
      </tr>
    </tbody>
  </table>
  <pagination-controls (pageChange)="currentPage = $event"></pagination-controls>
</div>

<select [(ngModel)]="itemsPerPage">
  <option value="5">5条/页</option>
  <option value="10">10条/页</option>
  <option value="20">20条/页</option>
</select>

CSS 代码

.table-container {
  margin: 20px 0;
  padding: 10px;
  border: 1px solid #eee;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

1. 修复核心问题：独立分页变量 #

你当前的代码里两个表格共用了同一个currentPage变量，这是导致分页异常的关键！第二个表格添加行时会改变分页的计算逻辑，干扰第一个表格的分页状态。

修改TS代码，给每个表格分配独立的分页变量：

// 替换原来的currentPage为两个独立变量
currentPage1 = 1;
currentPage2 = 1;

然后更新HTML里的分页绑定：

<!-- 表格1的分页 -->
<tr *ngFor="let item of table1Data | paginate: { itemsPerPage: itemsPerPage, currentPage: currentPage1, totalItems: table1Data.length }">
<!-- 表格1的分页控件 -->
<pagination-controls (pageChange)="currentPage1 = $event"></pagination-controls>

<!-- 表格2的分页 -->
<tr *ngFor="let item of table2Data | paginate: { itemsPerPage: itemsPerPage, currentPage: currentPage2, totalItems: table2Data.length }">
<!-- 表格2的分页控件 -->
<pagination-controls (pageChange)="currentPage2 = $event"></pagination-controls>

2. 强制触发变更检测（可选） #

动态添加行后，如果分页还是没及时更新，可能是Angular变更检测没触发。可以注入ChangeDetectorRef手动触发：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

addRowToTable1() {
  this.table1Data.push({ id: this.table1Data.length + 1, name: `Item ${this.table1Data.length + 1}` });
  this.cdr.detectChanges(); // 添加这行强制更新
}

addRowToTable2() {
  this.table2Data.push({ id: this.table2Data.length + 1, name: `Item ${this.table2Data.length + 1}` });
  this.cdr.detectChanges(); // 添加这行强制更新
}

3. 推荐的Angular分页实现 #

如果ngx-pagination还是有问题，可以试试这些成熟的方案：

• Angular Material Paginator：官方组件，和MatTable深度集成，支持自定义每页行数、跳转、总数显示等，样式统一，文档完善。
• Ngx Bootstrap Pagination：基于Bootstrap的分页组件，样式美观，配置灵活，适合使用Bootstrap的项目，支持响应式布局。

内容的提问来源于stack exchange，提问作者Manjunath H M