使用带有 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-header-cell *matHeaderCellDef mat-sort-header></mat-header-cell><mat-cell *matCellDef="let GetSummaryRecordsVaccinations"><img [attr.src]="getGenderIcon(Gender)"/></mat-cell></ng-容器><ng-container matColumnDef="IdentityNumber" 粘性><mat-header-cell *matHeaderCellDef mat-sort-header>מס' זהות </mat-header-cell><mat-cell *matCellDef="let GetSummaryRecordsVaccinations" >{{IdentityNumber}} </mat-cell></ng-容器><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-容器><ng-container matColumnDef="שפעת"><mat-header-cell *matHeaderCellDef>שפעת </mat-header-cell><mat-cell *matCellDef="let GetSummaryRecordsVaccinations"><div class="center">{{ClassDescription}}<br/>{{接种日期 |日期:'dd/MM/yyyy'}}
</mat-cell></ng-容器><mat-header-row class="mat-row-header-vaccination" *matHeaderRowDef="displayedVaccinationsAllColumns;sticky:true"></mat-header-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-header-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屋!