comment définir l'index dans le tableau des matériaux angulaires

Question

comment dois-je définir une variable d'index lorsque angulaire de la table de matériaux est utilisé comme ngFor n'est pas utilisé dans ce tableau.

J'ai fait une recherche dans la documentation, mais l'indice n'est pas mentionné dans il.

  <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 puis-je définir une variable d'index pour le tableau que j'ai utilisé dans ce tableau, de sorte que je peux lier la valeur de l'indice dans ma table elle-même.

Answer 1

Pouvez-vous ajouter `` à comme vous le feriez ```` avec?

Ou comme ça:

Answer 2

Pour toute personne qui a mis la propriété de [tapis-table](https://material.angular.io/components/table/api#MatTable) à vrai, vous ne pouvez pas utiliser . Au lieu de cela, vous avez l'utilisation soit ou .

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

Answer 3

Pour ceux qui sont confrontés à des difficultés à maintenir le droit de l'index lors de l'utilisation de la pagination de la table qui a plus de 1 page. Il peut être particulièrement important lorsque vous avez modifiable élément, donc vous êtes à l'aide d'un routerLink à ajouter/modifier/supprimer les é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>

Ainsi que

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

En substance, i + (paginator.pageIndex * paginator.pageSize) est la solution, mais il compte à partir de 0. Si vous souhaitez indice de 1, il suffit de faire (i+1) + (paginator.pageIndex * paginator.pageSize). Vaut la peine de noter, c'est que vous avez vraiment besoin de l' #paginator et [pageSize]="VALEUR".

Answer 4

Si quelqu'un utilisant `` , puis index peut être interprété comme ci-dessous

Answer 5

De Angular 5 vous pouvez alias à variable locale en utilisant``