向 PrimeNG 表添加新行时，分页不会刷新

Question

在这个简单的stackblitz中，只有 4 个初始行，分页部分只显示 1 页。现在，当我每 3 秒后动态添加行时，无论我添加多少行，分页部分也会显示一个页面。如何使分页与 table 数据保持同步？

Answer 1

由于数组是通过引用传递的，即使我们添加引用不变的新数据，尝试使用扩展运算符向数组添加新值。

setInterval(() => {
    const newData = {
      albumId: 25000,
      id: 24000,
      title: 'zaalim haakim',
      url: 'google.com',
      thumbnailUrl: 'google.com',
    };
      this.products = [...this.products,newData];
    }, 3000);

或

正如@Arnaud Denoyelle 在评论中提到的，您可以使用 Viewchild 获取 table 实例并对其调用重置以更新分页器状态

@ViewChild(Table) table: Table;

 setInterval(() => {
    const newData = {
      albumId: 25000,
      id: 24000,
      title: 'zaalim haakim',
      url: 'google.com',
      thumbnailUrl: 'google.com',
    };
      this.table.reset();
    }, 3000);

Forked Working Example

向 PrimeNG 表添加新行时，分页不会刷新

Pagination doesn't get refreshed when adding new rows to PrimeNG tables

primeng

angular

primeng-datatable