使用scrollHeight ='100％'时，primeng TurboTable（p-table）无法正常工作

Question

我希望TurboTable占用整个父级的高度（并在调整父级的大小时调整大小），因此只有表的内容是可滚动的，并且没有向父组件添加滚动条。

我已经尝试设置scrollHeight =“100％”，但这不能按预期工作：https://stackblitz.com/edit/angular-d9narm。

有任何想法吗？

更新：当@phucnh更正时，我应该使用scrollHeight =“calc（100％ - 200px）”来补偿我的填充。我现在更新了我的stackblitz以反映这一点。当窗口首次加载时，这非常有效，但如果您尝试更改它的高度，则表格的高度不会改变。

Answer 1

在CSS中，你设置padding: 100px所以你需要设置scrollHeight="calc(100% - 200px)"

如果要在调整大小时更新高度，则需要处理更多内容。我建议一个演示here

Answer 2

所以，在@phucnh的一些帮助和一些谷歌搜索后，我能够生成代码，允许TurboTable采用其所有父级大小并正确显示/隐藏滚动条：

https://stackblitz.com/edit/primeng-scrollable-table-fit-parent

基本上，它包含两个黑客：

1）我们需要观察父级大小的变化并强制Angular通过以下代码重新评估“scrollHeight”：

ngAfterViewInit(): void {
  new ResizeObserver(() => this.zone.run(() => this.onResize()))
    .observe(this.container.nativeElement);
}

private onResize(): void {
    // HACK: mark "scrollHeight" dirty, so it's re-evaluated.
    if (this.table.scrollHeight.endsWith(' ')) {
      this.table.scrollHeight = this.table.scrollHeight.slice(0, -1);
    } else {
      this.table.scrollHeight += ' ';
    }
}

2）为了解决标题单元格在滚动条出现/消失时变得不对齐的问题，我们需要做一些肮脏的黑客攻击（灵感来自https://stackblitz.com/edit/primeng-dynamic-scrollable）：

// HACK: automatically re-align table header when resized. Borrowed the idea from https://stackblitz.com/edit/primeng-dynamic-scrollable
const scrollableViewNgAfterViewInit = ScrollableView.prototype.ngAfterViewInit;

ScrollableView.prototype.ngAfterViewInit = function() {
  scrollableViewNgAfterViewInit.call(this);

  new ResizeObserver(() => {
    this.alignScrollBar();
  }).observe(this.scrollBodyViewChild.nativeElement);
};

这就是诀窍。

Answer 3

turboTable组件存在问题。

这两个黑客纠正了这个问题，但它们只适用于Chrome。我尝试在Firefox和Edge中使用它，两个浏览器都冻结了。我认为这是因为ResizeObserver目前是这两种浏览器不支持的功能。