web-dev-qa-db-fra.com

obtenir l'index de la ligne dans angular table des matières v5

J'essaie d'obtenir l'index de la ligne dans la table, au format HTML, qui a été implémenté à l'aide de angular matériau v5.2. Existe-t-il une méthode disponible pour obtenir l'index?

Le code de référence:

<div class="example-container mat-elevation-z8">
  <div class="example-header">
    <mat-form-field>
      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
    </mat-form-field>
  </div>

  <mat-table #table [dataSource]="dataSource">

    <!-- 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">
     <button (click)="doSomething()"> Do something</button>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</div>

La méthode do Quelque chose est ce qu'il faut indexer.

Toute aide serait grandement appréciée.

angularangular-material-5
12
Shivi

Utiliser indexOf est un énorme gaspillage de ressources. La bonne façon est d’initialiser une variable avec la valeur d’index, comme ceci:

<ng-container matColumnDef="position">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> Num. </th>
  <td mat-cell *matCellDef="let element; let i = index">{{i}}</td>
</ng-container>

https://material.angular.io/components/table/examples

31
zgluis

Vous pouvez utiliser la propriété filteredData de votre dataSource, comme ceci:

<ng-container matColumnDef="weight">
  <th mat-header-cell *matHeaderCellDef> Header</th>
  <td mat-cell *matCellDef="let element"> {{dataSource.filteredData.indexOf(element)}} </td>
</ng-container>

démo

Avec la solution @ user3891850 (let i = index;), en cas de pagination, l’index sera l’index de cette page et non de l’objet global; vous devez donc faire attention en cas de pagination. exemple

10
bugs

Si vous rencontrez ce problème et que vous utilisez un paginator l'index que vous obtenez ici:

  <td mat-cell *matCellDef="let element; let i = index">{{i}}</td>

sera l'index actuel affiché sur la table. Par exemple, si vous êtes à la page 2 et que la taille de votre page est 5, le premier index de la table sera 0 et non 5 (ou le sixième élément). Donc, ce que vous pouvez faire pour obtenir le véritable index ressemble à ceci:

index =
      this.paginator.pageIndex > 0
        ? index + this.paginator.pageIndex * this.paginator.pageSize
        : index;

Si la pagination est sur la première page, l'index ne change pas. Sinon, multipliez le pageIndex par la taille de la page et ajoutez-le à l'index.

3
mariogarcia

Je sais que ce post est vieux, mais la solution ci-dessus ne m'a pas fonctionné. si let i = index; essayer let i = dataIndex pour la dernière version de la vérification mat-table cette solution . Je ne sais pas si c'est juste pour la table extensible si

1
cozmik05

J'ai beaucoup cherché, mais pour mon cas, le scénario "indexOf" ne fonctionne pas correctement, alors j'ai trouvé ceci réponse , et il fait exactement ce dont j'ai besoin.

let i = index;
i + (paginator.pageIndex * paginator.pageSize);
0
Fes9L

Inclure 'let i = index' dans * matRowDef

0
Shibhe Tepa