在每一行內添加鏈接 - ngx-datatable

Question

我對角度非常陌生。 當單擊每行的第一列時，我試圖在 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>

Answer 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)="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])
  }

Answer 2

感謝您的幫助，我設法解決了這個問題。

<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和你說的完全一樣。

Answer 3

實際上，有一種更簡單的方法可以做到這一點。 您可以使用 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>