PrimeNG Table行重排后获取新序列遇异常：自定义代码致重排失效

问题原因 #

你手动调用splice修改playlistTracks数组的操作，和PrimeNG Table组件的自动重排逻辑冲突了——PrimeNG在触发onRowReorder事件前，已经自动完成了数据源的重排，你再手动执行一次数组操作，会导致数组被重复修改，出现索引混乱、重排失效的问题。

解决方法 #

不需要手动修改数据源，直接使用组件已经更新后的数组，或者从事件参数中获取重排后的序列：

修改后的tableReordered方法代码：

tableReordered(event: any) {
  this.reOrderedTracks = [];
  this.showDetailedGraph = false;
  this.showSummaryGraph = false;

  // 直接使用PrimeNG已经更新好的playlistTracks数组（浅拷贝避免引用关联）
  this.reOrderedTracks = [...this.playlistTracks];
  console.log('重排后的序列:', this.reOrderedTracks);

  // 也可以直接从event参数中获取重排后的数据源
  // this.reOrderedTracks = [...event.data];
}

说明 #

• PrimeNG Table的行重排功能会自动更新绑定的[value]数据源（即你的playlistTracks），所以无需手动调整数组顺序。
• 使用扩展运算符[...array]做浅拷贝，是为了避免reOrderedTracks和playlistTracks指向同一个数组引用，后续修改其中一个会影响另一个。

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