我有一个要求,我应该能够捕获所选行[用户可以点击该行的任何位置]。我浏览了文档https://material.angular.io/components/table/overview,但我找不到捕获所选行及其内容的方法。我试图附加一个点击事件 md-table 标记,但它没有用。
<md-table #table [dataSource]="tableDataSource" (click)="selectRow(row)">
答案 0 :(得分:21)
我能够让它如此运作:
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']" (click)="selectRow(row)"></md-row>
</md-table>
并在component.ts中
selectRow(row) {
console.log(row);
}
答案 1 :(得分:8)
https://material.angular.io/components/table/overview
您可以将点击事件添加到具有mat-row属性的tr元素中,并且可以访问与* matRowDef =“ let row;”相关的行。如下所示:
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selectRow(row)"></tr>
</table>
selectRow(row)是应该在组件内部编写的函数。
答案 2 :(得分:1)
我能够通过在 md-row 上添加点击事件[selectRow(row)]来实现这项工作
<md-table #table [dataSource]="tableDataSource">
<md-header-row *cdkHeaderRowDef="tableColumns"></md-header-row>
<md-row *cdkRowDef="let row; columns: tableColumns;" (click)="selectRow(row)"></md-row>
<ng-container cdkColumnDef="day">
答案 3 :(得分:0)
通常,该行上的点击事件有效
(https://stackblitz.com/edit/angular-nmb2x1?file=app/table-basic-example.html)。
在上面的示例中
在table-basic-example.html
(click)="test(row)"
在table-basic-example.ts
test(row){
console.log(row)
}
在控制台中,它显示选定的表行对象。