使用multiTemplateDataRows指令未定义角度表索引



我在显示表索引时遇到问题。下面是一个示例表:

<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>

列索引ij按预期显示,但当我单击我的行时,索引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问题

multiTemplateDataRows为true时提供给行单元格的上下文。此上下文与CdkCellOutletRowContext相同,只是将单个索引值替换为dataIndex和renderIndex。

参考文件: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>

最新更新