在表格Angular 8中添加链接答案

【问题标题】：Add link in a table Angular 8在表格Angular 8中添加链接
【发布时间】：2020-05-13 19:06:00
【问题描述】：

我有一个包含一些列的表格，并且我有一个可以单击和下载的“文档”列。如何只将文档名称设为链接？

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>

因此，我希望“文档”列是可点击的，并在点击时调用“downloadFile ()”函数。我该怎么做？

【问题讨论】：

stackblitz.com/edit/…

标签： angular html-table hyperlink download primeng

【解决方案1】：

这可以使用 *ngIf 来分隔您的案例。对于文档列，使用 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>

【讨论】：