Búsqueda de sitios web

javascript - cómo definir el índice en la tabla de Angular Material

¿Cómo debería definir una variable de índice cuando se usa una tabla de Angular Material y ngFor no se usa en esta tabla?

Busqué en la documentación, pero el índice no se menciona en ninguna parte de ella.

  <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 el arreglo que usé en esta tabla, para que pueda enlazar el valor del índice en la propia tabla?

Respuesta #1

¿Puedes agregar index a let element; let i=index;" como lo harías 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 funcional: https://stackblitz.com/edit/angular-acdxje?file=app/table-basic-example.html

Respuesta #2

Para cualquiera que haya configurado la propiedad multiTemplateDataRows de mat-table en true, no se puede usar index. En su lugar, debe usar dataIndex o renderIndex.

<mat-cell *matCellDef="let row; let i = dataIndex;">{{i}}</mat-cell>

Ver https://github.com/angular/material2/issues/12793

Respuesta #3

Para aquellos que enfrentan problemas para mantener el índice correcto al usar la paginación en tablas que tienen más de una página. Puede ser especialmente importante cuando tienes elementos editables, por lo tanto estás usando un routerLink 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 deseas indexar desde 1, simplemente hazlo (i+1) + (paginator.pageIndex * paginator.pageSize). Vale la pena mencionar que realmente necesitas el #paginator y [pageSize]="VALUE".

Artículos relacionados