PrimeNG table 延迟加载在首先设置属性时无法正常工作

Question

我们将 PrimeNG <p-table> 组件与 virtualScroll = true & lazy = true 一起使用。但是在下面的场景下是行不通的。

假设总共有 100 条记录，限制为 10。用户滚动并在偏移量 50 处看到一个项目，他单击该项目并转到该项目的详细信息页面。现在，当用户单击浏览器后退按钮时，我需要将他带回到他在 <p-table> 中查看的同一页面，为此我正在设置属性 [first] = 50 并显示正确的页面但是当我滚动时发出的事件包含偏移量 10 而不是 60，这是为什么？

Answer 1

当您使用 [first]="50" 时，您正在从前 50 个元素中删除数据。我建议改为跟踪 table scrollTop 偏移量并将其存储在例如本地存储或其他一些服务中。然后，当您返回 table 视图时，只需将 scrollTop 恢复为 table 滚动体。

Here is some ugly example of how to do it（滚动到某个偏移量并触发页面重新加载）

ngAfterViewInit() {
  const scrollableBody = this.table.containerViewChild.nativeElement.getElementsByClassName('ui-table-scrollable-body')[0];
  // listen for scrollTop changes
  scrollableBody.onscroll = (x) => {
    localStorage.setItem('scrollTop', scrollableBody.scrollTop);
  }
}

loadItemsLazy(event: any) {
  // immitated lazy data load
  setTimeout(() => {
    if (this.datasource) {
      this.items = this.datasource.slice(event.first, (event.first + event.rows));
    }
    // we need change scrollableBody.scrollTop
    // check some condition for doing it after returning from edit or something
    if (this.restoreOffset) {
      setTimeout(() => {
        const scrollableBody = this.table.containerViewChild.nativeElement.getElementsByClassName('ui-table-scrollable-body')[0];
        // restore last known offset
        scrollableBody.scrollTop = Number.parseInt(localStorage.getItem('scrollTop')) || 0;
      });
    }
  }, 2000); // some random data load time
}

PrimeNG table 延迟加载在首先设置属性时无法正常工作

PrimeNG table lazy loading not working properly on setting the property first

primeng

angular

PrimeNG table 延迟加载在首先设置 属性 时无法正常工作

PrimeNG table lazy loading not working properly on setting the property first

primeng

angular

PrimeNG table 延迟加载在首先设置属性时无法正常工作