web-dev-qa-db-fra.com

comment définir l'index dans la table des matériaux angular

comment dois-je définir une variable d'index lorsque angular table de matériaux est utilisé, car ngFor n'est pas utilisé dans cette table.

Je l'ai cherché dans la documentation, mais l'index n'est mentionné nulle part.

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

où et comment définir une variable d'index pour le tableau que j'ai utilisé dans cette table, afin de pouvoir lier la valeur d'index dans ma table elle-même.

angulartypescriptangular-material2
36
pushplata patel

Pouvez-vous ajouter index à let element; let i = index;" comme vous le feriez avec *ngFor?

<mat-row *matRowDef="let row; columns: displayedColumns; let i = index"></mat-row>

Ou comme si:

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

Pour ceux qui ont défini la propriété multiTemplateDataRows de mat-table sur true, vous ne pouvez pas utiliser index. Au lieu de cela, vous devez utiliser dataIndex ou renderIndex.

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

Voir https://github.com/angular/material2/issues/1279

36
adam0101

Pour ceux qui ont du mal à garder le bon index lors de la pagination, ce tableau a plus d'une page. Cela peut être particulièrement important lorsque vous avez un élément éditable, vous utilisez donc un routerLink pour ajouter/modifier/supprimer des éléments sélectionnés.

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

Aussi bien que

<mat-paginator #paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

En substance, i + (paginator.pageIndex * paginator.pageSize) est la solution, mais elle compte à partir de . Si vous souhaitez indexer à partir de 1, indiquez-le simplement (i + 1) + (paginator.pageIndex * paginator.pageSize). Il est intéressant de noter que vous avez vraiment besoin des # paginator et [pageSize] = "VALUE".

2
Daniel Danielecki

De Angular 5 vous pouvez alias index à la variable locale i à l'aide de index as i

<ng-container matColumnDef="rowIndex">
  <mat-header-cell *matHeaderCellDef> Index </mat-header-cell>
  <mat-cell *matCellDef="let element;index as i;"> {{ i }} </mat-cell>
</ng-container>
1
ElasticCode