angular - 角。无法在使用 Material 的动态表的第一列中显示和显示行号
问题描述
我一直在尝试在我的材料表中添加行号或记录号。第一列应显示 1、2、3、4、5 等。问题是我使用的是动态表(使用 ngFor 生成),因为我不知道要返回的记录类型。我的表是可排序的,并且将具有过滤功能。这个约束意味着我不能将行号绑定到单个记录。
我设法做的最好的事情就是破解。用行号覆盖第一列的内容,但这种解决方案并不理想。某处应该有解决方案,但我找不到。
如果有人可以提供帮助将不胜感激。
<div id="table-wrapper" >
<mat-table #myResultTable [dataSource]="resultTable" matSort class="mat-elevation-z8"
cdkDropListGroup >
<ng-container *ngFor="let columnHeader of columnsInTable; let colIndex = index"
[matColumnDef]="columnHeader.field" >
<mat-header-cell *matHeaderCellDef mat-sort-header>
{{columnHeader.field}}
</mat-header-cell>
<mat-cell *matCellDef="let rec; let num=index” >
<div style="word-break: break-word;" >
{{rec[colIndex]}}
</div>
</mat-cell>
</ng-container>
<mat-header-row class="colheader" *matHeaderRowDef="displayedColumns; " ></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" > </mat-row>
</mat-table>
解决方案
只需添加一个新列'num'<td mat-cell *matCellDef="let element;let i=index"> {{i+1}} </td>
并添加到displayColumns
如果需要单独的列,可以使用 *ngIf="!first"。
<ng-container matColumnDef="num">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element;let i=index"> {{i+1}} </td>
</ng-container>
<ng-container *ngFor="let column of displayedColumns;let first=first">
<ng-container *ngIf="!first" [matColumnDef]="column">
<th mat-header-cell *matHeaderCellDef> {{column}} </th>
<td mat-cell *matCellDef="let element"> {{element[column]}} </td>
</ng-container>
</ng-container>
推荐阅读
- php - PhpStorm 未发布到 Docker
- node.js - node.js for 带类的循环
- c - 任何人都可以在此代码段中找到可能的缓冲区溢出吗?
- angular - 使用 Angular ng2-admin 隐藏移动视图的菜单项
- ios - 无法从另一个视图控制器更改 UILabel.text,UILabel 得到 nil 值
- python - Spark Structured Streaming中如何保证相关事件一起处理?
- python - 形状不匹配:如果类别是一个数组,它必须是形状 (n_features,)
- python - 错误:(-215:断言失败)!函数“imwrite”中的_img.empty()
- autodesk-forge - 翻译位于 BIM 360 上的文件(模型)
- css - 更改 ANTD 复选框中的勾号颜色