html - Angular Flex 是否可以有多个粘性列？

Question

我有一个包含信息列和日期列的 Angular Material 表。我想让信息栏留在左侧，意味着粘性。

我已经尝试将“粘性”标签添加到所有我想要粘性但没有成功的列。

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

Answer 1

我认为this site可以帮助你。您可以通过更改站点中的选项来检查。

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