Angular material mat-table 有粘性列问题，列中有长文本

Question

Angular mat table 添加行选择复选框列时，粘性列功能无法正常工作，在复选框列和下一列之间获得一些额外的 space。而且在进行水平滚动时 UI 会变形。

请帮忙

Answer 1

在尝试了许多不同的选项后，我找到了根本原因并采取了解决方法。对我来说 mat table 在 *ngIf 条件内所以我必须像下面那样做，否则我认为 ngAfterViewInit 中的下面代码也应该工作。请参考 github issue - https://github.com/angular/components/issues/15885

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

Angular material mat-table 有粘性列问题，列中有长文本

Angular material mat-table with sticky column issue with long text in column

javascript

css

angular-material

mat-table

angular9