angular - Angular 6 mat-table 使用带有 flex 的粘性列不起作用
问题描述
我正在使用角度 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;
有什么想法可以解决这个问题吗?
解决方案
我终于解决了这个问题。
材料设计在版本中发生了变化7.1.1
。
为了使用粘性列,您需要使用<table mat-table></table>
标签而不是<mat-table></mat-table>
and <th mat-header-cell>
,<td mat-cell>
而不是<mat-header-cell>
and<mat-cell>
这就是我的桌子现在的样子:
<table mat-table [dataSource]="dataSourceVaccinations" matSort>
<ng-container matColumnDef="Gender" sticky>
<th mat-header-cell *matHeaderCellDef mat-sort-header></th>
<td mat-cell *matCellDef="let GetSummaryRecordsVaccinations">
<img [attr.src]="getGenderIcon(Gender)" />
</td>
</ng-container>
<ng-container matColumnDef="IdentityNumber" sticky>
<th mat-header-cell *matHeaderCellDef mat-sort-header> מס' זהות </th>
<td mat-cell *matCellDef="let GetSummaryRecordsVaccinations" > {{IdentityNumber}} </td>
</ng-container>
<ng-container matColumnDef="CodeVaccinationsAllowed">
<th mat-header-cell *matHeaderCellDef mat-sort-header> ניתן לחסן סיכום </th>
<td *matCellDef="let GetSummaryRecordsVaccinations">
<img [attr.src]="getIcon(CodeVaccinationsAllowed)"/> </td>
</ng-container>
<ng-container matColumnDef="שפעת">
<th mat-header-cell *matHeaderCellDef> שפעת </th>
<td mat-cell *matCellDef="let GetSummaryRecordsVaccinations">
<div class="center">{{ClassDescription}}
<br/>{{VaccinationDate | date:'dd/MM/yyyy'}}
</div>
</td>
</ng-container>
<tr mat-header-row class="mat-row-header-vaccination" *matHeaderRowDef="displayedVaccinationsAllColumns; sticky:true"></tr>
<tr mat-row class="mat-row-vaccination" *matRowDef="let row; columns: displayedVaccinationsAllColumns;" (click)="selection.select(row)"></tr>
</table>
推荐阅读
- c# - 重新运行更新迁移时实体框架核心出现错误
- flutter - 如何在 Flutter 中临时保存文件?
- git - 创建 git 分支时出错 - 偏移量和长度超出了数组的范围
- sql - 为什么在 WHERE 子句中使用 CONVERT(DATETIME, [date], [format]) 需要这么长时间?
- vue.js - 相关项目的链接断开
- python - 使用 EvolutionaryFS 时,只有整数、切片 (`:`)、省略号 (`...`)、numpy.newaxis (`None`) 和整数或布尔数组是有效的索引
- compression - 如何使用预测概率模型压缩序列?
- ruby-on-rails - 在 Heroku 上部署失败 - Ruby(在 Windows 上)
- python - 如何在pygame中添加具有原始图像形状的白色表面?
- node.js - 如何在没有“新关注者”或“回复消息”的情况下在 NodeJS Twitter 机器人中发送 DM