obtenez de l'indice de la ligne dans angulaire de la table de matériaux v5

Je vais essayer d'obtenir l'indice de ligne dans la table, en html, qui a été mis en œuvre à l'aide angulaire matériel v5.2. Est-il une méthode 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 doSomething est ce que les besoins de l'index.

Toute aide serait grandement appréciée.

InformationsquelleAutor Shivi | 2018-05-11
  1. 33

    Utiliser indexOf est un énorme gaspillage de ressources. Le droit chemin est en cours d'initialisation d'une variable avec l'indice de la valeur, 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

    • semble être une bonne idée.... Permettez-moi d'essayer si cela fonctionne...
    • C'est la bonne façon de le faire. Si vous n'êtes pas à l'aide de quoi que ce soit à partir de votre source de données dans cette colonne (par exemple,element), vous n'avez pas besoin de le déclarer. Il vous suffit de faire <td mat-cell *matCellDef="let i = index">{{i}}</td>
    • Doit être accepté comme réponse.
    • Essayé dans angular6 avec même mais chaque ligne indiquant 0
    • <td mat-cell *matCellDef="let element; let i = index">{{i}}</td> Cela Fonctionne
    • Une chose qui me déroute est pourquoi sur la terre est la moitié de la réponse en français?

    InformationsquelleAutor zgluis
  2. 10

    Vous pouvez utiliser le filteredData propriété 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 le @user3891850 solution(let i = index;), dans le cas de la pagination, l'index est l'index de cette page et non dans l'objet global de sorte que vous devez être prudent dans le cas de la pagination.
    exemple

    • Cela fonctionne {{dataSource.filteredData.indexOf(element)}}
    • C'est génial, j'ai utilisé {{source de données.filteredData.indexOf(élément)+1}} pour éviter la valeur 0. Merci u!!
    • Ouais, je suis surpris de voir pourquoi ils sont tous ok avec l'aide de l'index. Ils n'utilisent pas la pagination... c'est Ce que nous avons vraiment besoin pour paginé tapis de table..
    InformationsquelleAutor bugs
  3. 4

    Dans le cas où vous rencontrez ce problème et que vous utilisez un paginator l'indice que vous obtenez ici:

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

    sera l'indice actuel affiché sur le tableau. Par exemple, si vous êtes sur la page 2 et la taille de vos pages est de 5, le premier indice du tableau est 0 et non pas à 5 (ou le 6ème point). Donc, ce que vous pouvez faire pour obtenir la valeur de l'indice est quelque chose comme ceci:

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

    Si le paginator est sur la page, l'index ne change pas. Sinon multiplier les pageIndex par la pageSize et l'ajouter à l'index.

    InformationsquelleAutor mariogarcia
  4. 1

    Je sais que ce post est vieux, mais la solution ci-dessus ne fonctionne pas pour moi.
    au lieu de cela, si let i = index; essayer let i = dataIndex la dernière version de tapis-table de vérifier
    cette solution. Ne sais pas si c'est juste pour table extensible si

    InformationsquelleAutor cozmik05
  5. 0

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

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

    Inclure "let i = index' dans *matRowDef

    InformationsquelleAutor Shibhe Tepa