问题描述
我一直试图在材料表中添加行号或记录号。第一列应显示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>
解决方法
只需使用<td mat-cell *matCellDef="let element;let i=index"> {{i+1}} </td>
添加一个新列'num'并添加到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>
请参见stackblitz