1

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

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

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

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

感谢您的任何帮助。

4

2 回答 2

2

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

干杯克里斯

于 2019-08-31T15:21:38.460 回答
0

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

于 2019-08-29T06:37:24.567 回答