使用带有 flex 的粘性列的 Angular 6 mat-table 不起作用 [英] Angular 6 mat-table using sticky column with flex does not work

问题描述

我使用的是 angular 7，材质 7

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

标题变得粘稠，但单元格没有.

我的 html 如下所示:

<ng-container matColumnDef="Gender" 粘性><mat-h​​eader-cell *matHeaderCellDef mat-sort-header></mat-h​​eader-cell><mat-cell *matCellDef="let GetSummaryRecordsVaccinations"><img [attr.src]="getGenderIcon(Gender)"/></mat-cell></ng-容器><ng-container matColumnDef="IdentityNumber" 粘性><mat-h​​eader-cell *matHeaderCellDef mat-sort-header>מס' זהות </mat-h​​eader-cell><mat-cell *matCellDef="let GetSummaryRecordsVaccinations" >{{IdentityNumber}} </mat-cell></ng-容器><ng-container matColumnDef="CodeVaccinationsAllowed"><mat-h​​eader-cell *matHeaderCellDef mat-sort-header>ניתן לחסן סיכום </mat-h​​eader-cell><mat-cell *matCellDef="let GetSummaryRecordsVaccinations"><img [attr.src]="getIcon(CodeVaccinationsAllowed)"/></mat-cell></ng-容器><ng-container matColumnDef="שפעת"><mat-h​​eader-cell *matHeaderCellDef>שפעת </mat-h​​eader-cell><mat-cell *matCellDef="let GetSummaryRecordsVaccinations"><div class="center">{{ClassDescription}}<br/>{{接种日期 |日期:'dd/MM/yyyy'}}

</mat-cell></ng-容器><mat-h​​eader-row class="mat-row-header-vaccination" *matHeaderRowDef="displayedVaccinationsAllColumns;sticky:true"></mat-h​​eader-row><mat-row class="mat-row-vaccination" *matRowDef="让行；列:displayedVaccinationsAllColumns;"(click)="selection.select(row)"></mat-row></mat-table>

mat-row-header 声明为 min-width 以添加水平滚动

我的每一列都有特定的宽度，使用如下代码

flex: 0 0 50px;

有解决这个问题的想法吗?

解决方案

如果我们对表格宽度进行一些更改，角度材料将不起作用，所以基本上我把这个 css 用于使所有列具有相同的宽度

.mat-h​​eader-cell, .mat-footer-cell, .mat-cell {最小宽度:100px；box-sizing: 边框框；文本对齐:居中；}

现在它可以工作了

I am using angular 7, Material 7

I am trying to use sticky for specific column and it does not work,

the header getting sticky but the cell don't.

My html look as below:

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

the mat-row-header is declared with min-width in order to add horizontal scroll

Each of my column has specific width using the code like following

flex: 0 0 50px;

any idea to resolved this issue?

解决方案

the angular material doesnot work if we do some changeing in the table width so basicly i put this css to make all the columns have same width

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

}

and now it works thaks

这篇关于使用带有 flex 的粘性列的 Angular 6 mat-table 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！