在Angular中，如何获取具有可扩展内容的Mat-Table上的行索引? [英] In Angular, how do I get the row index on a Mat-Table with expandable content?

问题描述

我有一个页面，该页面使用带有可扩展内容的mat-table.我需要有一个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，对表进行排序仍然会返回原始行号，而不是排序后的行索引.我可以这样做吗? 谢谢

解决方案

代替使用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问题线程

的参考答案

I have a page that uses a mat-table with expandable content. I need to be able to have a click event that records the row number of the table that I am clicking on.

Now, if I have a table without the expandable content I can successfully use the following in the html file:

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

and the following in the component file:

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

but this doesn't work with expandable content. Here is a html file I am working with: Stackblitz HTML

which contains

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

and returns "undefined".

This is a simple example. In my actual page I am using a MatTableDataSource as the datasource for the mat-table. I am aware that I could use dataSource.filteredData.indexOf(element) in this situation to get the row number but the mat-table also uses a mat-sort and sorting the table will still return the original row number, not the index of the row after sorting. Can I do this? Thanks

解决方案

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

Referenced answer from a Github Material2 Issue Thread

这篇关于在Angular中，如何获取具有可扩展内容的Mat-Table上的行索引?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！