在每行内添加链接-ngx-datatable

时间:2019-03-09 16:19:52

标签: javascript html angular click ngx-datatable

我对棱角非常陌生。单击每行的第一列时,我试图在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>

3 个答案:

答案 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与您所说的完全一样。