Можно ли иметь более одной липкой колонки с Angular Flex? - PullRequest
0 голосов
/ 26 марта 2019

У меня есть угловая таблица материалов с информационными столбцами и столбцами даты.Я хочу, чтобы информационные столбцы оставались с левой стороны, то есть залипали.

Я уже пытался добавить тег "закрепления" ко всем столбцам, которые я хочу прикрепить, но не получилось.

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8" >
  <ng-container matColumnDef="group" sticky>
    <th mat-header-cell class="group" *matHeaderCellDef mat-sort-header> Konzern </th>
    <td mat-cell class="group" *matCellDef="let element"> {{element.group}} </td>
  </ng-container>

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

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


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

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

  <ng-container *ngFor="let week of this.displayedRowInformation; let i=index" [matColumnDef]="i.toString()">
    <th mat-header-cell class="week" [id]="i.toString()" *matHeaderCellDef> {{week.weeknumber}} </th>
    <td mat-cell class="week" *matCellDef="let element">
      <div style="position:relative">
        <div>{{ getEvent(week, element).description}}</div>
      </div>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

1 Ответ

0 голосов
/ 26 марта 2019

Я думаю этот сайт может вам помочь.Вы можете проверить, изменив параметры на сайте.

https://tburleson -layouts-demos.firebaseapp.com / # / docs

...