我在显示表索引时遇到问题。下面是一个示例表:
<mat-table [dataSource]="dataSource" multiTemplateDataRows>
<!--Column definitions-->
<ng-container matColumnDef="{{columnProp.name}}" *ngFor="let columnProp of columnProps; let i = index;">
<mat-header-cell *matHeaderCellDef mat-sort-header>
{{columnProp.name}} {{i}}
</mat-header-cell>
<mat-cell *matCellDef="let element; let j = index;">
<div>{{element[columnProp.name}} {{j}}</div>
</mat-cell>
</ng-container>
<!--Row definitions-->
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<!-- Row content-->
<mat-row
*matRowDef="let row; columns: displayedColumns; let k = index;"
matRipple
(click)="this.expandRow(row, k)">
</mat-row>
<!--Expanded row content-->
<mat-row
*matRowDef="let row; columns: ['expandedContent'];"
[@detailExpand]="row == expandedElement ? 'expanded' : 'collapsed'">
</mat-row>
</mat-table>
列索引i
和j
按预期显示,但当我单击我的行时,索引k
显示为未定义。我在这里做错了什么?
multiTemplateDataRows
有一个不同的变量来保存行的索引,称为dataIndex
。使用let k = dataIndex
访问行的索引。
<!-- Row content-->
<mat-row
*matRowDef="let row; columns: displayedColumns; let k = dataIndex;"
matRipple
(click)="this.expandRow(row, k)">
</mat-row>
相关github问题
参考文件:https://material.angular.io/cdk/table/api#CdkCellOutletMultiRowContext
使用multiTemplateDataRows指令,常规垫表元素和垫表元素之间略有不同。
对于常规mat表,只有通过访问index属性来使用行索引的选项。
使用multiTemplateDataRows指令,可以选择使用dataIndex访问数据本身的索引,以及使用renderIndex 渲染数据的顺序
<mat-cell *matCellDef="let i = index;"> {{i + 1}} </mat-cell>
<!--multiTemplateDataRows Table-->
<mat-cell *matCellDef="let i = dataIndex;"> {{i + 1}} </mat-cell>
<mat-cell *matCellDef="let j = renderIndex;"> {{i + 1}} </mat-cell>