代码之家  ›  专栏  ›  技术社区  ›  TabsNotSpaces

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

  •  1
  • TabsNotSpaces  · 技术社区  · 6 年前

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

    1 回复  |  直到 4 年前
        1
  •  33
  •   TabsNotSpaces    4 年前

    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