在Angular中，如何获取具有可扩展内容的Mat-Table上的行索引？

Question

我有一个页面使用带有可扩展内容的垫表。 我需要能够有一个click事件，该事件记录我正在单击的表的行号。

现在，如果我有一个没有可扩展内容的表，则可以在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>

并返回“ undefined”。

这是一个简单的例子。 在我的实际页面中，我使用MatTableDataSource作为mat-table的数据源。 我知道在这种情况下我可以使用dataSource.filteredData.indexOf(element)来获取行号，但是mat-table也使用mat-sort，对表进行排序仍然会返回原始行号，而不是返回的索引排序后的行。 我可以这样做吗？ 谢谢

Answer 1

而不是使用let i = index; 使用让我= 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线程的参考答案