web-dev-qa-db-ja.com

angularマテリアルテーブルv5の行のインデックスを取得します

angular material v5.2を使用して実装されたHTMLのテーブルの行のインデックスを取得しようとしています。インデックスを取得する方法はありますか？

参照用のコード：

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

メソッドdoSomethingはインデックスが必要なものです。

どんな助けも大歓迎です。

angularangular-material-5
12
Shivi

IndexOfの使用は、リソースの膨大な浪費です。正しい方法は、次のようにインデックスの値で変数を初期化することです。

<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

次のように、filteredDataのdataSourceプロパティを使用できます。

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

デモ

@ user3891850 solution（let i = index;）を使用すると、ページネーションの場合、インデックスはグローバルオブジェクトではなくこのページのインデックスになるため、ページネーションの場合は注意が必要です。 例

10
bugs

この問題に遭遇し、paginatorを使用している場合、ここで取得するインデックス：

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

テーブルに表示される現在のインデックスになります。たとえば、ページ2でページサイズが5の場合、テーブルの最初のインデックスは5ではなく0（または6番目のアイテム）になります。したがって、真のインデックスを取得するためにできることは次のようなものです。

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

ページ区切りが1ページ目にある場合、インデックスは変更されません。それ以外の場合は、pageIndexにpageSizeを乗算し、インデックスに追加します。

3
mariogarcia

この投稿が古いことは知っていますが、上記の解決策はうまくいきませんでした。代わりに、let i = index;がlet i = dataIndexを試して、最新バージョンのマットテーブルチェックを試してください このソリューション 。それが拡張可能なテーブルのためだけのものであるかどうかわからない

1
cozmik05

私はよく検索しましたが、私の場合、「indexOf」シナリオが正しく機能しないので、これを見つけました answer 、それはまさに必要なことをします。

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

* letRowDefに「let i = index」を含める

0
Shibhe Tepa