Question

我正在使用7号角，材质7

我正在尝试对特定列使用粘性，但它不起作用，

标题变得很粘，但单元格没有。

我的html如下：

<mat-table [dataSource]="dataSourceVaccinations" matSort>
  <ng-container matColumnDef="Gender" sticky>
     <mat-header-cell *matHeaderCellDef mat-sort-header></mat-header-cell>
        <mat-cell *matCellDef="let GetSummaryRecordsVaccinations">
          <img [attr.src]="getGenderIcon(Gender)" />
        </mat-cell>
     </ng-container>
     <ng-container matColumnDef="IdentityNumber" sticky>
       <mat-header-cell *matHeaderCellDef mat-sort-header> מס' זהות </mat-header-cell>
         <mat-cell *matCellDef="let GetSummaryRecordsVaccinations" > {{IdentityNumber}} </mat-cell>
     </ng-container>
     <ng-container matColumnDef="CodeVaccinationsAllowed">
        <mat-header-cell *matHeaderCellDef mat-sort-header> ניתן לחסן סיכום </mat-header-cell>
              <mat-cell *matCellDef="let GetSummaryRecordsVaccinations">
                <img [attr.src]="getIcon(CodeVaccinationsAllowed)"/> </mat-cell>
     </ng-container>
     <ng-container matColumnDef="שפעת">
        <mat-header-cell *matHeaderCellDef> שפעת </mat-header-cell>
              <mat-cell *matCellDef="let GetSummaryRecordsVaccinations">
                <div class="center">{{ClassDescription}}
                  <br/>{{VaccinationDate | date:'dd/MM/yyyy'}}
                </div>
              </mat-cell>
      </ng-container>
      <mat-header-row class="mat-row-header-vaccination" *matHeaderRowDef="displayedVaccinationsAllColumns; sticky:true"></mat-header-row>
            <mat-row class="mat-row-vaccination" *matRowDef="let row; columns: displayedVaccinationsAllColumns;" (click)="selection.select(row)"></mat-row>
  </mat-table>

mat-row-header用min-width声明，以便添加水平滚动

我的每一列都使用如下代码来指定宽度

flex: 0 0 50px;

有解决此问题的主意吗？

Answer 1

我终于解决了这个问题。

材料设计在版本7.1.1中进行了更改。

要使用粘性列，您需要使用<table mat-table></table>标签而不是<mat-table></mat-table>和<th mat-header-cell>，<td mat-cell>而不是<mat-header-cell>和{{1} }

这是我的桌子现在的样子：

<mat-cell>

Answer 2

如果我们对表格宽度进行一些更改，则角形材料将不起作用，因此从根本上讲，我将使用此CSS来使所有列的宽度相同

.mat-header-cell, .mat-footer-cell, .mat-cell {
  min-width: 100px;
  box-sizing: border-box;
  text-align: center;

}

现在可以正常工作

Angular 6 Mat-Table使用带有Flex的粘性列不起作用

2 个答案: