我对棱角非常陌生。单击每行的第一列时,我试图在ngx-datatable的每一行上添加一个链接。这应该带我到基于行ID的另一页,例如,如果我有课程表,则第一列是课程的名称。当我单击每行的课程名称时,我想保存整个行ID并调用具有该ID的函数,这应该使我进入每门课程的适当页面。 课程名称应为可见链接(可单击),并在其上带有cursor:指针。 任何能帮助我完成这项工作的想法,我将不胜感激。
这是我到目前为止尝试过的(链接不起作用):
viewCourseTrainings(id: number){
this.router.navigate(['/home-page/mentor-trainings/'+ id])
}
<ngx-datatable
class="material"
[rows]="rows"
[columns]="columns"
[columnMode]="'force'"
[headerHeight]="50"
[footerHeight]="50"
[rowHeight]="'auto'"
[limit]="5">
<ngx-datatable-column name="Name" prop="name">
<ng-template let-row="row" let-value="value">
<a (click)="viewCourseTrainings(value.id)">{{value.name}}</a>
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
答案 0 :(得分:1)
到目前为止,您的代码看起来不错,我建议您传递整个值并访问TS中的ID
<ngx-datatable-column prop="$key">
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
<a class="nav-link edit" (click)="editInventory(value)">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
</a>
</ng-template>
</ngx-datatable-column>
对应的TS
viewCourseTrainings(valObj: any){
this.router.navigate(['/home-page/mentor-trainings/'+ valObj.id])
}
答案 1 :(得分:1)
实际上有一种更简单的方法可以做到这一点。您可以使用 routerLink 并使用双大括号传递行 ID。这样就不需要在 ts 文件中定义任何东西。看我的例子:
<ngx-datatable-column name="Actions" [width]="80">
<ng-template let-row="row" ngx-datatable-cell-template>
<a routerLink="/mentor-trainings/{{row.id}}">View training</a>
</ng-template>
</ngx-datatable-column>
答案 2 :(得分:0)
谢谢您的帮助,我设法解决了这个问题。
<ngx-datatable-column name="Name" prop="name">
<ng-template ngx-datatable-cell-template let-row="row" let-value="value">
<a class="nav-link" (click)="viewCourseTrainings(row)">
{{row.name}} <!-- or {{value}} -->
</a>
</ng-template>
</ngx-datatable-column>
TS与您所说的完全一样。