web-dev-qa-db-ja.com

Angular Material-データテーブルの行のインデックスを取得

Angular Material のMatTableコンポーネントを使用して、動的データテーブルを作成しています。

行の現在位置を取得する必要があります。ユーザーがクリックした行は簡単に取得できますが、リスト内の現在の位置を知ることができません（これは、並べ替え/フィルタリング/ページネーションに依存します）。

何か案が？

angularangular-materialangular5angular-material2
5
NanoPish

mat-cellでは、以下のように*ngForのようなインデックスを取得できます

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

更新 from Angular 5も使用index as i

<ng-container matColumnDef="rowIndex">
  <th mat-header-cell *matHeaderCellDef> Index </th>
  <td mat-cell *matCellDef="let element;index as i;"> {{ i }} </td>
</ng-container>
  • index：数値：イテラブル内の現在のアイテムのインデックス。
  • first：boolean：アイテムが反復可能オブジェクトの最初のアイテムである場合はtrue。
  • last：boolean：アイテムがイテラブルの最後のアイテムである場合はtrue。
  • even：boolean：アイテムの反復可能オブジェクトに偶数のインデックスがある場合はtrue。
  • odd：boolean：アイテムの反復可能オブジェクトに奇数のインデックスがある場合はtrue。
12
ElasticCode

Angularjsまたはangular2を使用していますか？あなたのタイトルはangularjsですが、あなたのタグと投稿はそうではありません。

角度2

<div *ngFor="item of items; i = index">
  <span click(item, i)>
</div>

angularjs

<div ng-repeat="item of items">
  <span click(item, $index)>
</div>

編集：私はあなたのコメントを見ました、この答えはあなたを助けますか？ CDKデータテーブルまたはMaterial2データテーブルにインデックスプロパティはありますか？

1
rhavelka

私はたくさん検索しましたが、私の場合、 "indexOf"シナリオが適切に機能しないので、これを発見しました answer 、そしてそれは私が必要とするものを正確に実行します。

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