如何添加到Primeng数据表列的超链接,角度2方式

时间:2017-06-08 13:15:13

标签: angular hyperlink anchor primeng primeng-datatable

我在项目设置中使用Primeng数据表。但我希望所有行的第一列都是超链接,以便我可以使用[routerLink](有角度的2路)将它们链接到下一页。我很无法实现这一目标......

有没有办法解决这个问题??

提前致谢!

3 个答案:

答案 0 :(得分:7)

  

我是你真正的maseeaha试试这是有效的:

<p-dataTable [value]="cars">
    <p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header">
        <template let-row="rowData" pTemplate>
              <span *ngIf="col.header==='Vin'"><a style="color:blue;" routerLink="/prbDetails/{{row.vin}}">{{row[col.field]}}</a></span>
              <span *ngIf="col.header!=='Vin'">{{row[col.field]}}</span>
        </template>
    </p-column>
</p-dataTable>

答案 1 :(得分:2)

你的Maseeha回来了:)

希望此解决方案可以帮助您:)

<p-dataTable [value]="data" [rows]="50" [rowsPerPageOptions]="[500,1000,2000]" [paginator]="true" [pageLinks]="5"  sortMode="single" reorderableColumns="true" scrollable="true" scrollHeight="200px" [globalFilter]="gb" #dt exportFilename="search" styleClass="styles">
    <p-column field="name" header="Name" [sortable]="true">
                    <ng-template let-col let-data="rowData" pTemplate="body">
                        <span><a [routerLink]='["pageName"]' [queryParams]='{key1:data["Your Value"],key2:data["Your Value"]}' style="color: blue;">{{data["Your Value"]}}</a></span>

                    </ng-template>
                </p-column>

</p-dataTable>

答案 2 :(得分:0)

您必须执行以下操作:

<td *ngFor="let col of columns">
        <span *ngIf="col.header==='Opportunity'"><a routerLink="/prbDetails/{{rowData.opportunityId}}">{{rowData[col.field]}}</a></span>
        <span *ngIf="col.field==='dcn'"><a routerLink="/prbDetails/{{rowData.dcn}}">{{rowData[col.field]}}</a></span>
        <span *ngIf="col.header!=='Opportunity' && col.field!=='dcn'">{{rowData[col.field]}}</span>
      </td>

希望这会有所帮助!

干杯, 尼丁