Angular mat-table 滚动时粘性列重叠

Question

我正在使用 Angular 8 的 table（不使用 flex），前两列为粘性。

问题：

主要问题是第 1 列和第 2 列之间的 space，这会导致其他问题。
当我进行水平滚动时，滚动数据在这些列之间的 space 中可见
有一个css 属性设置left为159px。这是如何计算的？

重现问题。

将 Angular 的 table 示例与粘性列一起使用。 https://stackblitz.com/angular/lynkxvonedv?file=src%2Fapp%2Ftable-sticky-columns-example.html

将 Sticky 添加到第 2 列（位置）
向任何非粘性列添加长文本。（我已经将它用于重量列）。

提前致谢。

Answer 1

我找到了一个可能对您有帮助的解决方法。

constructor(private ngZone: NgZone) {}
ngAfterViewInit() {
this.ngZone.onMicrotaskEmpty.pipe(take(3)).subscribe(() => this.table.updateStickyColumnStyles());
}

GitHub Link: https://github.com/angular/components/issues/15885

Answer 2

对我来说，mat table 处于 *ngIf 条件中，所以我必须执行如下操作。

@ViewChild('matTable', { static: false }) set table(matTable: MatTable<any>) {
    if (matTable) {
      this.ngZone.onMicrotaskEmpty
        .pipe(take(3))
        .subscribe(() => matTable.updateStickyColumnStyles())
    }
  }

Angular mat-table 滚动时粘性列重叠

Angular mat-table Sticky Column overlaps when Scrolled

sticky

angular

mat-table