如何将超链接添加到 Primeng 数据表列,angular 2 种方式
How to add hyperlink to Primeng datatable column,angular 2 way
我在我的项目中使用 Primeng 数据表 setup.But 我希望所有行的第一列都是 hyperlink,这样我就可以 link 那些到下一页使用[routerLink](angular 2 种方式)。我完全无法实现...
在 primeng 中有什么方法可以解决这个问题吗?
提前致谢!
你的马西哈回来了:)
希望此解决方案对您有所帮助:)
<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>
I am your real maseeaha try this it is working:
<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>
你必须这样做:
<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>
希望对您有所帮助!!!
干杯,
尼丁
我在我的项目中使用 Primeng 数据表 setup.But 我希望所有行的第一列都是 hyperlink,这样我就可以 link 那些到下一页使用[routerLink](angular 2 种方式)。我完全无法实现...
在 primeng 中有什么方法可以解决这个问题吗?
提前致谢!
你的马西哈回来了:)
希望此解决方案对您有所帮助:)
<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>
I am your real maseeaha try this it is working:
<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>
你必须这样做:
<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>
希望对您有所帮助!!!
干杯, 尼丁