В Angular, как я могу получить индекс строки в Mat-Table с расширяемым содержимым?

Question

У меня есть страница, которая использует мат-таблицу с расширяемым контентом. Мне нужно иметь возможность щелкнуть событие, которое записывает номер строки таблицы, по которой я щелкаю.

Теперь, если у меня есть таблица без расширяемого содержимого, я могу успешно использовать следующее в html-файле:

<tr mat-row *matRowDef="let row; columns: displayedColumns; let i = index"
    (click)="logIndex(i)">

и следующее в файле компонента:

 logIndex(i)
  {
    console.log(i);
  }

но это не работает с расширяемым контентом. Вот HTML-файл, с которым я работаю: Stackblitz HTML

который содержит

<tr mat-row *matRowDef="let element; columns: columnsToDisplay;let i = index;"
      class="example-element-row"
      [class.example-expanded-row]="expandedElement === element"
      (click)="expandedElement = element"
      (click)="logIndex(i)">
  </tr>

и возвращает "неопределенный".

Это простой пример. На моей реальной странице я использую MatTableDataSource в качестве источника данных для таблицы mat. Я знаю, что я мог бы использовать dataSource.filteredData.indexOf(element) в этой ситуации, чтобы получить номер строки, но таблица матов также использует сортировку матов, и при сортировке таблицы будет возвращаться исходный номер строки, а не индекс строки после сортировки. Я могу это сделать? Спасибо

Answer 1

Вместо использования let i = index; Используйте let i = dataIndex

<tr mat-row 
    *matRowDef="let element; columns: columnsToDisplay; let i = dataIndex;"
  class="example-element-row"
  [class.example-expanded-row]="expandedElement === element"
  (click)="expandedElement = element"
  (click)="logIndex(i)">

Ссылочный ответ из ветки Github Material2 Issue