角料粘柱多于1柱 [英] Angular material Sticky column more than 1 column

问题描述

我目前使用 angular ver 7 和 angular cli 以及 angular material 的最新版本

im curently using angular ver 7 with angular cli and also angular material the lastest version

使用带有粘性列位置的角度表时，我说到点子上了

im get to the point when using the angular table with sticky column position

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

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

but when im serve it in the browser the sticky column all mess up, there is some space beetween them so when im scroll to the right, the animation seems so off

这是使用 2 Sticky 的正确方法吗?

it is the right way to use 2 sticky?

推荐答案

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

Solved but in a clumsy way. The Angular 7 material table columns require percentage width positioning to be correctly aligned. Anyways I ended up giving fixed width to columns which are sticky from .scss file *e.g. * in your case

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

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

Notice that left has to be positioned exactly. This along with sticky tag on these two columns in the HTML template made it work properly for me.

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

In newest version of Angular you need to use .mat-column.

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

这篇关于角料粘柱多于1柱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！