Angular Flex可以有多个粘性柱吗?

时间:2019-03-26 07:01:20

标签: html css angular angular-material angular-flex-layout

我有一个角形材料表,其中包含信息列和日期列。我想让信息列留在左侧,表示粘性。

我已经尝试过将“粘性”标签添加到所有我想粘性但无法解决的列中。

<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 :(得分:0)

我认为this site可以为您提供帮助。您可以通过更改网站中的选项进行检查。

  

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