Угловой материал Липкая колонна более 1 колонны

Question

я сейчас использую угловой вер 7 с угловым клином, а также угловой материал, последняя версия

Я получаю точку при использовании угловой таблицы с закрепленным столбцом

<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

Вместо того, чтобы просто писать 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 2

Была такая же проблема.Липкие столбцы разрушаются, и между столбцами возникает странное расстояние, вызванное атрибутом sticky.Это означает, что при прокрутке таблицы эффект аккордеона изменяется на размер столбцов с привязкой, а содержимое столбца с нижней / не закрепленной прокруткой отображается под столбцами верхнего / закрепленного типа.

Решение:

Установите min-width и max-width на каждом прикрепленном столбце, чтобы они были одинаковыми -Я использовал px.

Answer 3

Решено, но неуклюже.Столбцы таблицы материалов Angular 7 требуют правильного выравнивания в процентах по ширине.В любом случае я в итоге дал фиксированную ширину столбцам, которые являются липкими из .scss файла * например * в вашем случае

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

Обратите внимание, что слева должно быть точно расположено.Это вместе с прикрепленным тегом в этих двух столбцах в шаблоне HTML помогло мне правильно работать.