角料表：动态粘柱破表答案

【问题标题】：Angular material table: Dynamic sticky columns break the table角料表：动态粘柱破表
【发布时间】：2021-05-20 18:17:18
【问题描述】：

在 mat-table 中动态添加粘性和非粘性列的组合似乎会破坏它。你可以在这里看到演示：https://stackblitz.com/edit/angular-mfxahi?file=src/app/table-sticky-columns-example.ts 我怀疑问题是由于 Angular 不知道列中内容的实际宽度，但是将 width 或 min-width 设置为 .mat-header-cell, .mat-cell 并没有帮助。检查列时，您可以看到 left CSS 属性未设置为正确值。

我无法更改表以使用静态定义，因为它在不同的场景中重复使用。知道如何解决这个问题吗？

【问题讨论】：

标签： css angular angular-material

【解决方案1】：

不要在.mat-header-cell 或.mat-cell 上设置宽度，而是在粘性列上设置width 和left (.mat-column-<label>)。为了让它工作，左边的值需要至少设置为前一列的宽度：

.mat-column-name {
  width: 110px; 
}
.mat-column-position {
  width: 80px;
  left: 110px !important;
}

注意：您需要使用!important，因为left 直接设置在.mat-header-cell 和.mat-cell 上。

如果您想更动态地设置粘性列的样式，可以将样式添加到列定义中，然后在模板中使用：

const DEFINITIONS: ColumnDefintion[] = [
  {label: 'name', sticky: true, style: {'width':'100px', 'left':'0px'}},
  {label: 'position', sticky: true, style: {'width':'80px', 'left':'100px'}},
  {label: 'weight'},
  {label: 'symbol'},
]

<!-- ... -->
<ng-container *ngIf="colDef.sticky" [matColumnDef]="colDef.label" sticky>
    <th mat-header-cell *matHeaderCellDef [ngStyle]="colDef.style">{{colDef.label}}</th>
    <td mat-cell *matCellDef="let element" [ngStyle]="colDef.style">{{element[colDef.label]}}</td>
</ng-container>
<!-- ... -->

工作示例：Stackblitz

【讨论】：

感谢您的回答！那时的解决方案很简单！遗憾的是，您不能保留未定义的宽度，因此表格可以根据需要自行调整大小。我猜你无法计算你需要在每列上设置多少像素。但这实际上应该可以通过使用 JS 检查列宽然后将left 设置为适当的值来实现？
@I_Have_A_Name 这取决于您真正想要实现的外观。您可以不定义宽度，但是当水平滚动时，第一列的宽度将自动减小到右侧相邻列的“左”值，并且第二列的宽度不会改变（您可以轻松测试这是我的 Stackblitz。只需从 style 中删除宽度定义。
关于计算值：我想说这取决于您是否希望列至少与标题一样宽，或者您是否希望它以某种方式适合内容的宽度。如果您关心标题，您可以将标签的字符串长度乘以某个数字，为填充添加一些额外的值并将该值用作宽度。但这更像是一种破解，而不是完美的解决方案。 JS 方法可能是更好的方法。
我同意 JS 方法是一种可行的方法，感谢您的信息！

【解决方案2】：

我遇到了同样的问题，如果您使用粘性和动态列，这似乎是一个普遍问题。

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

这对我有用：

@ViewChild(MatTable) table: MatTable<any>;

ngAfterViewChecked(): void {
    if (this.table) {
        this.table.updateStickyColumnStyles();
    }
}

希望它也对你有用。

【讨论】：