Блог

Я очень новичок в angular. Я пытаюсь добавить ссылку в каждую строку ngx-datatable при нажатии на первый столбец каждой строки. Это должно привести меня на другую страницу на основе идентификатора строки, например, если у меня есть таблица курсов, первый столбец — это название курса. Когда я нажимаю на название курса для каждой строки, я хочу сохранить идентификатор всей строки и вызвать функцию с этим идентификатором, которая должна привести меня к соответствующей странице для каждого курса. Название курса должно быть видимой ссылкой (кликабельной) с курсором: указатель на нее. Я был бы признателен за любую идею, которая поможет мне выполнить эту работу.

Это то, что я пробовал до сих пор (ссылка не работает):

  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

  <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])
  }
  

Спасибо за вашу помощь, мне удалось решить эту проблему.

 <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 в точности соответствует вашим словам.

На самом деле есть более простой способ сделать это. Вы можете использовать routerLink и передать идентификатор строки с помощью двойных фигурных скобок. Таким образом, нет необходимости определять что-либо в файле 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>