получить индекс строки в угловой таблице материалов v5

Я пытаюсь получить индекс строки в таблице в html, который был реализован с использованием углового материала v5.2. Есть ли какой-нибудь метод для получения индекса?

Код для справки:

<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 - это то, что нужно index.

Любая помощь будет принята с благодарностью.


angular angular-material-5
person ShivangiBilora    schedule 11.05.2018    source источник

Ответы (7)


arrow_upward
99
arrow_downward

Использование 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 + 1}}</td>
</ng-container>

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

ОБНОВЛЕНИЕ:

Если вы используете разбивку на страницы, индекс можно рассчитать следующим образом:

<ng-container matColumnDef="position">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> Num. </th>
  <td mat-cell *matCellDef="let i = index">
  {{this.paginator.pageIndex == 0 ? i + 1 : 1 + i + this.paginator.pageIndex * this.paginator.pageSize}}
  </td>
</ng-container>
person zgluis    schedule 24.05.2018
comment
Это правильный способ сделать это. Если вы не используете что-либо из вашего источника данных в этом столбце (например, element), вам не нужно объявлять это. Вы можете просто сделать <td mat-cell *matCellDef="let i = index">{{i}}</td> - person dnc253; 28.06.2018
comment
<td mat-cell *matCellDef="let element; let i = index">{{i}}</td> Это работает - person Akitha_MJ; 24.12.2018
comment
Одна вещь, которая сбивает меня с толку, - почему, черт возьми, половина ответа на французском? - person icguy; 25.04.2019
comment
@zgluis Если мы используем mat-paginator вместе с mat-table, как сделать то же самое? - person ONE_FE; 02.02.2020
comment
Это работает. Вам необходимо определить идентификатор пагинатора. Мы использовали несколько пагинаций в одном файле HTML <td mat-cell *matCellDef="let i = index;">{{ this.TableTwoPaginator.pageIndex == 0 ? i+1 : i+ 1 + this.TableTwoPaginator.pageIndex * this.TableTwoPaginator.pageSize}}</td> Спасибо ... !!! - person Dhaval Mojidra; 28.04.2020
comment
this.paginator.pageIndex == 0 ? i + 1 : 1 + i + this.paginator.pageIndex * this.paginator.pageSize можно сократить до просто this.paginator.pageIndex * this.paginator.pageSize + i + 1 - person Kasun; 12.01.2021

arrow_upward
24
arrow_downward

Вы можете использовать свойство 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 (let i = index;) в случае разбивки на страницы индекс будет индексом на этой странице, а не в глобальном объекте, поэтому вы должны быть осторожны в случае разбивки на страницы. пример

person bugs    schedule 11.05.2018
comment
Это работает {{dataSource.filteredData.indexOf(element)}} - person Akitha_MJ; 24.12.2018
comment
Это здорово, я использовал {{dataSource.filteredData.indexOf (element) +1}}, чтобы избежать значения 0. Спасибо !! - person Diana Ysabel; 28.12.2018
comment
Да, я удивлен, почему все они согласны с использованием index. Разве они не используют разбиение на страницы ... Это то, что нам действительно нужно для таблицы с разбивкой на страницы .. - person Shree Krishna; 17.06.2019
comment
Вы знаете, сколько раз выполняется рендеринг и каждый раз вы хотите найти индекс? Это приводит к низкой производительности на больших столах. - person coderman; 27.10.2020

arrow_upward
12
arrow_downward

Любой, кто использует Angular6 +, должен использовать let i = dataIndex вместо let i = index, как описано в этой проблеме Github. .

Вот фрагмент HTML

<ng-container matColumnDef="position">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> Num. </th>
  <td mat-cell *matCellDef="let element; let i = dataIndex">{{i + 1}}</td>
</ng-container>
person Shem Muthanga    schedule 15.09.2020
comment
dataIndex - это правильный ответ !! Спасибо! Так много ответов, но действителен только этот. - person Kurkov Igor; 28.04.2021

arrow_upward
9
arrow_downward

Если вы столкнулись с этой проблемой и используете paginator индекс, вы получите здесь:

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

будет текущим индексом, отображаемым в таблице. Например, если вы находитесь на странице 2 и размер вашей страницы равен 5, то первым индексом таблицы будет 0, а не 5 (или шестой элемент). Итак, что вы можете сделать, чтобы получить истинный индекс, примерно так:

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

Если пагинатор находится на первой странице, индекс не изменяется. В противном случае умножьте pageIndex на pageSize и добавьте его в индекс.

person mariogarcia    schedule 10.05.2019

arrow_upward
7
arrow_downward

увеличить номер позиции в мат-таблице ....

<ng-container matColumnDef="index">
  <th mat-header-cell *matHeaderCellDef> Sr.No </th>
  <td mat-cell *matCellDef="let i=index"> {{i+1}} </td>
</ng-container>
person Pintoo Rana    schedule 12.11.2019

arrow_upward
4
arrow_downward

Я знаю, что этот пост старый, но приведенное выше решение не сработало для меня. вместо этого, если let i = index; попробуйте let i = dataIndex для последней версии проверки мат-таблицы это решение. Не знаю, только ли это для расширяемой таблицы

person cozmik05    schedule 24.08.2019

arrow_upward
0
arrow_downward

Я много искал, но в моем случае сценарий indexOf не работает должным образом, тогда я нашел этот ответ, и он делает именно то, что мне нужно.

let i = index;
i + (paginator.pageIndex * paginator.pageSize);
person Fes9L    schedule 20.08.2019