使用行分组时primeng p-table虚拟滚动显示前行答案

【问题标题】：Primeng p-table virtual scroll display previous rows when using row grouping使用行分组时primeng p-table虚拟滚动显示前行
【发布时间】：2019-08-23 10:17:38
【问题描述】：

我正在尝试创建一个具有分组行的p-table，但我无法正确应用虚拟滚动功能。

p-table 是PrimeNg 框架的一部分。

问题是在滚动和执行延迟加载（实际上只是附加一些行）时，表格会显示以前的行而不是新的行。但是，如果我加载所有数据并从头到尾滚动，所有行都会正确显示。我认为这是延迟加载后刷新表时出现的问题。

为了更好地理解这个问题，我在 stackblitz 上复制了它：https://stackblitz.com/edit/angular6-primeng-8mtvwc

感谢您的帮助。

【问题讨论】：

我不确定是否可以在您附加的 stackblitz 中看到问题。你确定它是正确的吗？
我已经记录了在 stackblitz 上重现的问题：gofile.io/?c=GYNJhF
您是否尝试在名称中添加尾部，使用相同的名称可能会更假尝试 const acpName = faker.company.companyName(0) + faker.random.number({min:1,最大：10}）；或类似的东西

标签： angular primeng primeng-turbotable virtualscroll

【解决方案1】：

1) 分组后，你设置的totalRecords不正确。我们必须计算标题行的数量并将其添加到totalRecords：

this.totalRecords = this.filteredInvoices.length + Object.keys(this.rowGroupMetadata).length;

2) 总是从头开始切片对我来说不太有意义。我们应该只将新行推送到表中。所以而不是：

  loadChunk(init?: boolean) {
   ...
      data = [...this.filteredInvoices]
    } else {
      data = this.filteredInvoices.slice(0, endIndex); // <===
    }
    ..
  }

你可以这样做：

  loadChunk(init?: boolean) {
    ...
    const startAt = this.displayedInvoices ? this.displayedInvoices.length : 0;
    let endAt = startAt + this.MAX_ROWS;

    if (endAt >= this.filteredInvoices.length) {
      endAt = this.filteredInvoices.length;
    }

    const newInvoices = this.filteredInvoices.slice(startAt, endAt);

    this.displayedInvoices.push(...newInvoices);
  }

更新了你的blizz，希望对你有帮助：https://stackblitz.com/edit/angular6-primeng-psbm78?file=src/app/home-encoding/home-encoding.component.ts

克里斯干杯

【讨论】：

谢谢。它实际上解决了这个问题，但他们仍然发生了一些奇怪的事情。如果我滚动加载一个块然后进行搜索，则表格不会调整大小以适应实际的行数。你可以在这个视频中看到它：gofile.io/?c=RhkPIm

【解决方案2】：

我认为问题在于，PrimeNg 在内部使用行高进行虚拟滚动，例如，当行具有不同的高度时，这总是会导致问题。由于您的行是分组的，因此您可能有一个组标题行，这也会使计算更加麻烦。

【讨论】：