gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-30 22:05:47 24 4
gpt4 key购买 nike

我有一个使用带有可扩展内容的 mat-table 的页面。我需要能够有一个点击事件来记录我点击的表格的行号。

现在,如果我有一个没有可扩展内容的表格,我可以在 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 并且对表进行排序仍将返回原始数据行号,不是排序后行的索引。我可以这样做吗?谢谢

最佳答案

Instead of using let i = index; Use 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 的引用答案

关于html - 在 Angular 中,如何获取具有可扩展内容的 Mat-Table 上的行索引?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53530994/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com