角料粘柱多于1柱

Question

我目前使用 angular ver 7 和 angular cli 以及 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 的正确方法吗？

Answer 1

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

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