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

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

0 голосов
/ 29 ноября 2018

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

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

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

и возвращает "undefined".

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

1 Ответ

0 голосов
/ 29 ноября 2018

Вместо использования 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 Thread

...