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

标签 javascript html angular click ngx-datatable

我对 Angular 很陌生。单击每一行的第一列时,我试图在 ngx-datatable 的每一行上添加一个链接。这应该根据行 ID 将我带到另一个页面,例如,如果我有一个类(class)表,第一列是类(class)的名称。当我单击每一行的类(class)名称时,我想保存整个行 ID 并使用此 ID 调用一个函数,这应该将我带到每门类(class)的适当页面。 类(class)的名称应该是一个可见的链接(可点击),上面带有光标:指针。 如果有任何想法可以帮助我完成这项工作,我将不胜感激。

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

 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>

最佳答案

到目前为止你的代码看起来不错,我建议你传递整个值并访问 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> 

对应的TS

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

关于javascript - 在每一行内添加链接 - ngx-datatable,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55079358/

相关文章:

javascript - 在 ajax 调用后,jquery 隐藏不适用于同一个 div 类?

javascript - on 和 hover 不能一起工作

checkbox - Angular2,如果没有选中复选框则禁用按钮

html - 我用 id 更改了 css 标签 li 但没有用

angular - 在 Angular2 中使用移动事件

php - 如何通过 POST 而不是 ajax 提交数据对象

javascript - 如何将值从经典的 asp 传递到 javascript

php - 表单中输入的多个值?

html - 新行中第一个和最后一个内联 block 元素的选择器

php - 如果选择标签的选项值不是特定值,我如何设置默认值?