PrimeNG p-table分页器部署到服务器后在IE11中异常：点击最后一页页码未同步更新

看起来你遇到了PrimeNG分页器在IE11部署环境下的页码显示bug，我之前在Angular 10 + PrimeNG 10的项目里也碰到过类似问题，结合你的场景给你几个实际可行的解决方案：

1. 手动触发变更检测与分页器状态更新 #

IE11对Angular变更检测的支持存在局限性，懒加载数据完成后可能没触发分页器的视图更新。你可以在load方法中，判断加载的是最后一页时，手动触发变更检测并强制更新分页器：

import { ChangeDetectorRef, ViewChild } from '@angular/core';
import { Table } from 'primeng/table';

// 组件类内定义
@ViewChild('dt') dt: Table;
constructor(private cdr: ChangeDetectorRef) {}

load(event) {
  // 你的数据加载逻辑...
  this.loading = false;
  this.totalCount = 接口返回的总记录数;
  
  // 判断当前是否为最后一页
  const lastPageNum = Math.ceil(this.totalCount / this.rowsPerPage);
  const currentPageNum = (event.first / this.rowsPerPage) + 1;
  
  if (currentPageNum === lastPageNum) {
    setTimeout(() => {
      // 触发变更检测
      this.cdr.detectChanges();
      // 强制更新分页器状态
      if (this.dt.paginator) {
        this.dt.paginator.updatePaginatorState();
      }
    }, 0);
  }
}

2. 调整first属性的绑定方式 #

双向绑定[(first)]="0"在IE11下可能存在兼容性问题，建议改成单向绑定并手动维护当前偏移量：

组件类内新增变量：

currentFirst = 0;

模板中修改绑定：

<p-table #dt [columns]="cols" [exportFilename]="" [value]="" [lazy]="true" 
  (onLazyLoad)="load($event)" [paginator]="true" [first]="currentFirst" 
  [rows]="rowsPerPage" [totalRecords]="totalCount" [loading]="loading" 
  tableStyleClass="table table-hover table-striped">

在load方法中更新偏移量：

load(event) {
  this.currentFirst = event.first;
  // 数据加载逻辑...
}

3. 补全IE11所需的Polyfill #

Angular 10默认的Polyfill可能不足以覆盖IE11的特性支持，检查你的polyfills.ts文件，确保包含以下内容：

// IE11核心Polyfill
import 'core-js/es/array';
import 'core-js/es/object';
import 'core-js/es/function';
import 'core-js/es/map';
import 'core-js/es/set';
import 'core-js/es/promise';
import 'core-js/es/string';

// Zone.js补丁
import 'zone.js/dist/zone';
import 'zone.js/dist/zone-patch-rxjs';
import 'zone.js/dist/zone-patch-ie';

同时确保tsconfig.json的编译目标设置为ES5：

{
  "compilerOptions": {
    "target": "es5",
    // 其他配置...
  }
}

4. 强制刷新总记录数触发视图更新 #

如果以上方法无效，可以尝试通过临时修改totalRecords的值来触发分页器的DOM更新：

load(event) {
  // 数据加载完成后
  this.loading = false;
  // 先设置临时值，再恢复真实值，强制触发变更
  const tempTotal = this.totalCount;
  this.totalCount = 0;
  setTimeout(() => {
    this.totalCount = tempTotal;
    this.cdr.detectChanges();
  }, 0);
}

内容的提问来源于stack exchange，提问作者anuj trehan