angular - 如何访问 mat-table 的 TR 中的 MatTableDataSource 元素?
问题描述
我有一个使用数据源的表,我想提取数据源每一行的特定元素,以便我可以建立一个链接以在用户单击该行时路由到该行。但我不确定如何访问它。
<table mat-table [dataSource]="tokenData" class="w-full ">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element">
<img src="https://bscscan.com{{element.position}}"/>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="'page/{{row.position}}'"></tr>
</table>
[routerLink]="'page/{{row.position}}'"
不起作用,我如何从 访问元素?
解决方案
您正在单向可绑定属性中混合值routerLink
。{{}}
当属性被 . 包围时,您不能使用语法[]
。
你可以这样实现:
[routerLink]="'page/' + row.position"
或者正如安德烈建议的那样:
routerLink="page/{{row.position}}"