角料粘柱多于1列答案

【问题标题】：Angular material Sticky column more than 1 column角料粘柱多于1列
【发布时间】：2021-08-16 08:19:25
【问题描述】：

我目前正在使用带有 angular cli 的 angular ver 7 以及最新版本的 angular material

当使用带有粘性列位置的角度表时，我明白了

<ng-container matColumnDef="name" sticky>
      <th mat-header-cell *matHeaderCellDef> Name </th>
      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>

<ng-container matColumnDef="address" sticky>
      <th mat-header-cell *matHeaderCellDef> Address</th>
      <td mat-cell *matCellDef="let element"> {{element.address}} </td>
    </ng-container>

但是当我在浏览器中提供它时，粘性列都搞砸了，它们之间有一些空间，所以当我向右滚动时，动画看起来很糟糕

2sticky的正确使用方法是什么？

【问题讨论】：

标签： angular7

【解决方案1】：

以笨拙的方式解决了。 Angular 7 材料表列需要正确对齐百分比宽度定位。无论如何，我最终为来自.scss文件*例如粘性的列提供了固定宽度。 * 在你的情况下

.mat-col-name 
{
  left: 0px;
  width: 100px 
}
.mat-col-address 
{
  left: 100px;
  width: 100px;
}

请注意，left 必须准确定位。这与 HTML 模板中这两列上的粘性标签一起使它对我正常工作。

编辑： 在最新版本的 Angular 中，您需要使用 .mat-column。

.mat-column-name 
{
  left: 0px;
  width: 100px 
}
.mat-column-address 
{
  left: 100px;
  width: 100px;
}

【讨论】：

这是一个不错的解决方案，但不适用于元素。至少对我来说，我不知道为什么。
你是救生员，我已经这样做了，忘记了我们为什么这样做。现在我的表在升级到 Angular 11 后又坏了。记得我的表中有类似的设置，升级后左侧的值设置不正确。我还没有修复它，但这个答案指出了正确的方向。非常感谢。
在 Angular 11 中对我来说是完美的解决方案，起初它不起作用，但在分析 css 后我知道它是 .mat-column-name。 +1

【解决方案2】：

遇到了同样的问题。粘性列正在折叠，并且由粘性属性引起的列之间存在奇怪的间距。这意味着当您在表格中滚动时，粘性列大小会产生手风琴效果，并且下部/非粘性滚动列上的内容会显示在顶部/粘性列下方。

解决方法：

将每个粘性列上的 min-width 和 max-width 设置为相同的值 - 我使用了 px。

【讨论】：

这适用于 td 元素，但不适用于 th... 这很奇怪... 是否有针对此的开放 github 问题？

【解决方案3】：

我通过覆盖粘性 css 并使用粘性作为属性来解决这个问题。在我的情况下，它的三个粘性标题对我有用

<ng-container matColumnDef="name" sticky class="mat-col-name">
  <th mat-header-cell *matHeaderCellDef class="mat-col-name"> Name </th>
  <td mat-cell *matCellDef="let element" class="mat-col-name"> {{element.name}} </td>
</ng-container>

<ng-container matColumnDef="address" sticky class="mat-col-address">
  <th mat-header-cell *matHeaderCellDef  class="mat-col-address"> Address</th>
  <td mat-cell *matCellDef="let element" class="mat-col-address"> {{element.address}} </td>
</ng-container>

css:
.mat-col-name {
  width: 100px;
  top: 56px;
  z-index: 101;
  left: 0px;
  position: sticky;
}
.mat-col-address {
  left: 100px !important;
  width: 100px;
  top: 56px;
  z-index: 101;
  position: sticky;
}

【讨论】：

【解决方案4】：

当对 3 列使用粘性时，在 Angular 材质表中。我发现粘性列的视图扭曲，其中添加了空白，这是因为粘性属性的内置 CSS 属性。在我的本地，我没有在代码中提供任何 left 或 width CSS，但在 DOM 中它占用了额外的剩余空间。

所以我通过覆盖粘性属性的 CSS 使用下面的 CSS 解决了这个问题。

HTML：

<ng-container matColumnDef="level" class="mat-col-levelDefault " sticky>
    <th mat-header-cell *matHeaderCellDef> Level </th>
    <td mat-cell *matCellDef="let element"> {{element.level}} </td>
</ng-container>

CSS：

.mat-col-levelDefault {
    left: 200px !important;
    width: 100px;
    top: 56px;
    z-index: 101;
    position: sticky;
}

【讨论】：

【解决方案5】：

与其只写sticky，不如在两个位置都写[sticky]="true"，这应该可以。休息角度材质会自动调整。

代码如下：-

<ng-container matColumnDef="name" [sticky]="true">
  <th mat-header-cell *matHeaderCellDef> Name </th>
  <td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>

<ng-container matColumnDef="address" [sticky]="true">
  <th mat-header-cell *matHeaderCellDef> Address</th>
  <td mat-cell *matCellDef="let element"> {{element.address}} </td>
</ng-container>

【讨论】：

这不会改变任何事情。
在 Angular 方面，“sticky”和“[sticky]='true'”是等价的。没办法，这可以解决问题。