如何捕获所选表行 Material Design MD表

我有一个要求我应该能够捕获所选的字符串[用户可以单击行中的任何位置]。 我看过文件
https://material.angular.io/co ... rview
, 但我找不到捕获所选字符串及其内容的方法。 我试图附上一个活动 click 到
塔布

md-table

, 但它没有工作。


<md-table "="" #table="" ="selectrow="" [datasource]="tableDataSource" click="" row="">


</md-table>
已邀请:

涵秋

赞同来自:

我能够以这种方式使它运作:

在 component.html 年


<md-table [datasource]="dataSource">
<ng-container mdcolumndef="a">
<md-header-cell *mdheadercelldef=""> a </md-header-cell>
<md-cell *mdcelldef="let element"><a routerlink="{{element.number}}"> {{element.a}} </a></md-cell>
</ng-container>
<ng-container mdcolumndef="b">
<md-header-cell *mdheadercelldef=""> b </md-header-cell>
<md-cell *mdcelldef="let element"> {{element.b}} </md-cell>
</ng-container>
<md-header-row *mdheaderrowdef="['a', 'b']"></md-header-row>
<md-row "="" *mdrowdef="let row; columns: ['a', 'b']" ="selectrow="" click="" row=""></md-row>
</md-table>


A B. component.ts 年


selectRow/row/ {
console.log/row/;
}

二哥

赞同来自:

https://material.angular.io/co ... rview
您可以添加您的活动 click 在元素中 tr, 有一个属性 mat-row, 你可以相对进入字符串 *matRowDef="let row;" 如下所示 :


<table [datasource]="dataSource" class="mat-elevation-z8" mat-table="">
<!-- Position Column -->
<ng-container matcolumndef="position">
<th *matheadercelldef="" mat-header-cell=""> No. </th>
<td *matcelldef="let element" mat-cell=""> {{element.position}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matcolumndef="name">
<th *matheadercelldef="" mat-header-cell=""> Name </th>
<td *matcelldef="let element" mat-cell=""> {{element.name}} </td>
</ng-container>
<tr *matheaderrowdef="displayedColumns" mat-header-row=""></tr>
<tr "="" *matrowdef="let row; columns: displayedColumns;" ="selectrow="" click="" mat-row="" row=""></tr>
</table>



selectRow/线/ - 这是您的函数,应该在组件内录制。

二哥

赞同来自:

我能够完成这项工作,而是附上一个活动 click [selectRow/row/] 在

md-row


<md-table #table="" [datasource]="tableDataSource">
<md-header-row *cdkheaderrowdef="tableColumns"></md-header-row>
<md-row "="" *cdkrowdef="let row; columns: tableColumns;" ="selectrow="" click="" row=""></md-row>
<ng-container cdkcolumndef="day">


</ng-container></md-table>

裸奔

赞同来自:

在一般情况下,行行事件运行

/
https://stackblitz.com/edit/an ... .html
/.

在上面的例子中

在表格基本 - example.html中


/click/="test/row/"


在表格基础上 - 例如


test/row/{
console.log/row/
}


控制台显示所选的表字符串对象。

要回复问题请先登录注册