Question

即时使用带有ver角的cli ver 7和最新版本的Angle材料

在使用带有粘性列位置的角度表时，我会达到目的

<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>

但是当我在浏览器中提供即时贴时，粘性列全部混乱了，它们之间有一些空间，所以当我向右滚动时，动画看起来就这么关闭

使用2粘糊糊是正确的方法吗？

Answer 1

已解决，但笨拙。 Angular 7材质表列需要百分比宽度定位才能正确对齐。无论如何，我最终为.scss文件中* *的粘性列提供了固定宽度。 *您的情况

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

注意，必须精确定位左侧。加上HTML模板这两列中的粘性标签，它对我来说可以正常使用。

Answer 2

与其在两个位置都写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>

Answer 3

存在相同的问题。粘性列正在崩溃，并且由sticky属性引起的列之间存在奇怪的间隔。这意味着当您在表格上滚动时，手风琴会影响粘性列的大小，并且下部/非粘性滚动列的内容会显示在顶部/粘性列的下方。

解决方案：

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

Answer 4

我通过覆盖粘性CSS来解决此问题，并且也将sticky用作属性。在我的情况下，它具有三个粘性页眉，对我来说很有效

<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;
}

Answer 5

当使用粘性3列时，在“角度”材料表中。我发现粘性列的扭曲视图在其中增加了空格，这是由于sticky属性的内置CSS属性所致。在我的本地环境中，我没有在代码中提供任何左侧或宽度的CSS，但是在进行DOM时会占用额外的左侧空间。

因此，我使用下面的CSS通过覆盖sticky属性的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;
}

角材粘性柱1柱以上

5 个答案: