Javascript 在每行内添加链接-ngx数据表

Javascript 在每行内添加链接-ngx数据表,javascript,html,angular,click,ngx-datatable,Javascript,Html,Angular,Click,Ngx Datatable,我是个新手。当单击每行的第一列时,我试图在ngx datatable的每一行上添加一个链接。这将使我根据行id转到另一个页面,例如,如果我有一个课程表,第一列是课程的名称。当我点击每一行的课程名称时,我想保存整个行id,并用这个id调用一个函数,它会将我带到每个课程的相应页面。 课程名称应该是一个可见的链接(可点击),上面有光标:指针。 如果有任何想法能帮助我完成这项工作,我将不胜感激 这是我到目前为止尝试过的(链接不起作用): viewCourseTrainings(id:number){ t

我是个新手。当单击每行的第一列时,我试图在ngx datatable的每一行上添加一个链接。这将使我根据行id转到另一个页面,例如,如果我有一个课程表,第一列是课程的名称。当我点击每一行的课程名称时,我想保存整个行id,并用这个id调用一个函数,它会将我带到每个课程的相应页面。 课程名称应该是一个可见的链接(可点击),上面有光标:指针。 如果有任何想法能帮助我完成这项工作,我将不胜感激

这是我到目前为止尝试过的(链接不起作用):

viewCourseTrainings(id:number){
this.router.navigate(['/home page/mentor trainings/'+id])
}

{{value.name}

到目前为止,您的代码看起来不错,我建议您传递整个值并访问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)="viewCourseTrainings(value)">
                    <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                  </a>
                </ng-template>
  </ngx-datatable-column> 

谢谢你的帮助,我设法解决了这个问题

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

{{row.name}

TS和你说的一模一样。

实际上有一种更简单的方法可以做到这一点。您可以使用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>

视图训练

oh您能添加{{value}}并在模板中查看吗
<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>