Angular table 未使用 multiTemplateDataRows 指令定义索引

Question

我无法显示我的 table 索引。这是一个例子 table:

<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 显示为未定义。我在这里做错了什么？

Answer 1

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>

Relevant github issue

Answer 2

[normal Table] 
 <mat-cell *matCellDef="let i = index;"> {{i + 1}} </mat-cell>
[multiTemplateDataRows Table] 
 <mat-cell *matCellDef="let i = dataIndex;"> {{i + 1}} </mat-cell>

Angular table 未使用 multiTemplateDataRows 指令定义索引

Angular table index is undefined with multiTemplateDataRows directive

indexing

row

angular

mat-table