在Angular中，如何获得具有可扩展内容的Mat表上的行索引

Question

我有一个页面，它使用了一个包含可扩展内容的垫子表。我需要能够有一个点击事件，记录我正在点击的表的行号。

现在，如果我有一个没有可扩展内容的表，我可以成功地在html文件中使用以下内容：

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

以及组件文件中的以下内容：

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

但这不适用于可扩展内容。这是我正在使用的一个html文件：Stacklitz 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)来获取行号，但mat表也使用mat排序，对表进行排序后仍然会返回原始行号，而不是排序后的行索引。我能做这个吗？感谢

Answer 1

而不是使用let i=index；使用let i=数据索引

<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问题线程的参考答案