Добавить ссылку в таблицу Angular 8 - PullRequest
Новая
       8

Добавить ссылку в таблицу Angular 8

0 голосов
/ 28 января 2020

У меня есть таблица с некоторыми столбцами, и у меня есть столбец «документы», который можно щелкнуть и загрузить. Как ТОЛЬКО сделать имя документа ссылкой?

HTML

<p-table #dt3 [columns]="colsPermessi" [value]="permessi" [paginator]="true" [scrollable]="false" [rows]="10" [autoLayout]="true">

<ng-template pTemplate="header" let-columns>
    <tr>
       <th *ngFor="let col of columns" pResizableColumn>{{col.header}} </th>
       <th>Azioni</th>
       <th>Permessi</th>
    </tr>
 </ng-template>

  <ng-template pTemplate="body" let-rowData let-columns="columns">
     <tr [pSelectableRow]="rowData">
         <td *ngFor="let col of colsPermessi">
            {{rowData[col.field]}}
         </td>
     </tr>
  </ng-template>

enter image description here

Поэтому я хочу, чтобы столбец «документ» был кликабельным, и при клике он вызывает функцию «downloadFile ()». Как я могу это сделать?

1 Ответ

0 голосов
/ 28 января 2020

Это можно сделать, используя * ngIf для разделения ваших дел. Для столбцов documentmento используйте ngIf, чтобы вставить тег гиперссылки. Для всего остального просто вставьте текст. Смотрите пример ниже: 

  <ng-template pTemplate="body" let-rowData let-columns="columns">
     <tr [pSelectableRow]="rowData">
         <td *ngFor="let col of colsPermessi">
            <span *ngIf="col.header == 'Documento'><a [href]="col.url">{{rowData[col.field]}}</a></span>
            <span *ngIf="col.header != 'Documento'>{{rowData[col.field]}}</span>
         </td>
     </tr>
  </ng-template>
...