Добавить ссылку внутри каждой строки - ngx-datatable - PullRequest
Новая
       13

Добавить ссылку внутри каждой строки - ngx-datatable

0 голосов
/ 09 марта 2019

Я очень новичок в угловой. Я пытаюсь добавить ссылку на каждую строку 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>

Ответы [ 2 ]

1 голос
/ 09 марта 2019

Пока ваш код выглядит хорошо, я бы порекомендовал вам передать все значение и получить доступ к идентификатору в TS 

 <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])
  }
0 голосов
/ 09 марта 2019

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

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

И ТС в точности как ты сказал.

...