滚动时角垫表粘性列重叠答案

【问题标题】：Angular mat-table Sticky Column overlaps when Scrolled滚动时角垫表粘性列重叠
【发布时间】：2019-10-30 06:20:21
【问题描述】：

我正在使用 Angular 8 的表格（不使用 flex），前 2 列是粘性的。

问题：

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

重现问题。

使用带有粘性列的 Angular 表格示例。 https://stackblitz.com/angular/lynkxvonedv?file=src%2Fapp%2Ftable-sticky-columns-example.html

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

提前致谢。

【问题讨论】：

标签： angular sticky mat-table

【解决方案1】：

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

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

GitHub 链接：https://github.com/angular/components/issues/15885

【讨论】：

让我试试这个。顺便问一下，这段代码是做什么的？？
@josiebhai - 当当前 VM 中没有微任务入队时，会触发 onMicrotaskEmpty 事件。因此，每当所有微任务完成时，this.table.updateStickyColumnStyles() 都会被调用以重新计算粘性位置。而this.table 你必须使用@ViewChild() 进行查询。

【解决方案2】：

对我来说，mat 表在 *ngIf 条件内，所以我必须执行以下操作。

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

【讨论】：