¿Cómo debo definir una variable de índice cuando se usa la tabla de material angular ya que ngFor no se usa en esta tabla?
Lo busqué en la documentación, pero el índice no se menciona en ninguna parte.
<mat-table #table [dataSource]="dataSource"> <!--- Note that these columns can be defined in any order. The actual rendered columns are set as a property on the row definition" --> <!-- Position Column --> <ng-container matColumnDef="position"> <mat-header-cell *matHeaderCellDef> No. </mat-header-cell> <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell> </ng-container> <!-- Name Column --> <ng-container matColumnDef="name"> <mat-header-cell *matHeaderCellDef> Name </mat-header-cell> <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell> </ng-container> <!-- Weight Column --> <ng-container matColumnDef="weight"> <mat-header-cell *matHeaderCellDef> Weight </mat-header-cell> <mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell> </ng-container> <!-- Symbol Column --> <ng-container matColumnDef="symbol"> <mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell> <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell> </ng-container> <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row> </mat-table> </div>dónde y cómo defino una variable de índice para la matriz que utilicé en esta tabla, de modo que pueda vincular el valor de índice en mi tabla.
¿Puedes agregar index para let element; let i = index;" como lo haría con *ngFor ?
<mat-row *matRowDef="let row; columns: displayedColumns; let i = index"></mat-row>O así:
<ng-container matColumnDef="index"> <mat-header-cell *matHeaderCellDef> Index </mat-header-cell> <mat-cell *matCellDef="let element; let i = index;">{{i}}</mat-cell> </ng-container>Ejemplo de trabajo: https://stackblitz.com/edit/angular-acdxje?file=app/table-basic-example.html
Para aquellos que tienen problemas para mantener el índice correcto cuando usan la paginación, qué tabla tiene más de 1 página. Puede ser especialmente importante cuando tiene un elemento editable, por lo que está utilizando un enlace de enrutador para agregar/editar/eliminar elementos seleccionados.
<ng-container matColumnDef="title"> <mat-header-cell *matHeaderCellDef mat-sort-header>Title</mat-header-cell> <mat-cell *matCellDef="let book; let i = index;" fxLayoutAlign.lt-md="center center"> <button mat-button [routerLink]="[i + (paginator.pageIndex * paginator.pageSize)]" routerLinkActive="active"</button> </mat-cell> </ng-container>Así como
<mat-paginator #paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>En esencia, i + (paginator.pageIndex * paginator.pageSize) es la solución, pero cuenta desde 0 . Si desea indexar desde 1 , simplemente hágalo (i+1) + (paginator.pageIndex * paginator.pageSize) . Vale la pena señalar que realmente necesita el #paginator y [pageSize]="VALUE" .