Angular 17启用provideClientHydration后PrimeNG表格行重复显示问题

问题背景 #

使用Angular 17.3.8，配置provideClientHydration(withHttpTransferCacheOptions({includePostRequests: true}))后，PrimeNG懒加载表格出现每行重复的现象；禁用Hydration后表格显示正常，更换低版本Angular问题仍存在。表格核心配置如下：

<p-table #dt 
         [value]="tokenList" 
         dataKey="tokenId" 
         [showFirstLastIcon]="false" 
         [alwaysShowPaginator]="false" 
         styleClass="p-datatable-striped" 
         [paginator]="true" 
         [rows]="30" 
         [totalRecords]="totalRecord" 
         [lazy]="true" 
         (onLazyLoad)="loadMoreRecords($event)"
         [lazyLoadOnInit]="false" 
         stateStorage="session" 
         stateKey="token-table-session">

可能的解决方案 #

1. 排查状态存储与Hydration的冲突

表格开启了stateStorage="session"，Hydration在客户端恢复页面时，可能重复触发了懒加载逻辑，导致数据被两次追加。可以先临时关闭状态存储验证：

<p-table ... stateStorage="none" ...>

如果问题消失，说明是session状态恢复与Hydration的冲突。此时可以考虑：

• 改用stateStorage="local"测试是否仍有问题
• 在Hydration完成后手动恢复表格状态，避免重复加载

2. 调整Http传输缓存的范围

当前配置开启了includePostRequests: true，若表格懒加载使用POST请求，缓存的请求可能在Hydration时被再次执行，导致数据重复。可以针对表格的懒加载请求排除缓存：

provideClientHydration(withHttpTransferCacheOptions({
  includePostRequests: true,
  // 根据实际请求URL排除，示例URL包含'token-list'
  excludeRequestPredicate: (req) => req.url.includes('token-list')
}))

3. 借助AfterHydration钩子控制表格加载时机

Angular提供AfterHydration钩子，可在Hydration完成后再初始化表格，避免重复加载：

import { Component, ViewChild, OnInit, AfterHydration } from '@angular/core';
import { Table } from 'primeng/table';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit, AfterHydration {
  isHydrated = false;
  @ViewChild('dt') dt!: Table;
  tokenList: any[] = [];
  totalRecord = 0;

  ngAfterHydration(): void {
    this.isHydrated = true;
    // Hydration完成后手动触发一次懒加载
    this.dt?.lazyLoad();
  }

  ngOnInit(): void {
    // 非Hydration场景下的初始化逻辑（若需要）
    if (!this.isHydrated) {
      // ...
    }
  }

  loadMoreRecords(event: any) {
    // 加载前可先做去重判断，避免重复追加数据
    const newData = // 你的API请求逻辑
    const existingIds = this.tokenList.map(item => item.tokenId);
    const uniqueData = newData.filter(item => !existingIds.includes(item.tokenId));
    this.tokenList = [...this.tokenList, ...uniqueData];
    // ...更新totalRecord等
  }
}

4. 升级PrimeNG版本至兼容Angular 17的最新版

部分旧版本PrimeNG组件在Angular Hydration模式下存在渲染或逻辑重复的bug，尝试升级PrimeNG到17.x系列的最新稳定版，看是否已修复该问题。

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