[英]Angular Kendo UI show Grid items as hyperlink
I am new to Angular Kendo UI and I have am going through Kendo UI Grid System on the website . 我是Angular Kendo UI的新手,并且正在网站上浏览Kendo UI网格系统。
My grid data has reports with name, date and link as below: 我的网格数据包含名称,日期和链接如下的报告:
gridData: IReport[] = [
{
"date": "9/5/2018",
"reportName": "Report 1",
"reportLink": "http://google.com/",
"reportStatus": "Success"
},
{
"date": "9/7/2018",
"reportName": "Report 2",
"reportLink": "http://yahoo.com/",
"reportStatus": "Success"
},
{
"date": "8/5/2018",
"reportName": "Report 3",
"reportLink": "http://msn.com/",
"reportStatus": "Success"
},]
I want to display this grid on UI with reportLink as a hyperlink. 我想使用reportLink作为超链接在UI上显示此网格。 This is how my html looks:
这是我的HTML外观:
<kendo-grid [resizable]="true" [data]="gridData" [height]="500">
<kendo-grid-column field="date" title="Date" width="40">
</kendo-grid-column>
<kendo-grid-column field="reportName" title="Report Name" width="50">
</kendo-grid-column>
<kendo-grid-column field="reportLink" title="Report Link" width="50">
<ng-template kendoGridCellTemplate let-dataItem *ngFor="let data of gridData">
<a href="{{data.reportLink}}">{{data.reportLink}}</a>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="reportStatus" title="Report Status" width="80">
</kendo-grid-column>
</kendo-grid>
I display the link I am looping through gridData and displaying it as tag. 我显示我正在遍历gridData的链接并将其显示为标记。
<kendo-grid-column field="reportLink" title="Report Link" width="50">
<ng-template kendoGridCellTemplate let-dataItem *ngFor="let data of gridData">
<a href="{{data.reportLink}}">{{data.reportLink}}</a>
</ng-template>
</kendo-grid-column>
My issue is that the report link only shows http:google.com for all the report. 我的问题是报告链接仅对所有报告显示http:google.com。
What am I doing wrong? 我究竟做错了什么? I expect to see google.com, yahoo.com and msn.com as my report links.
我希望看到google.com,yahoo.com和msn.com作为我的报告链接。
Any pointers? 有指针吗? Thanks all!
谢谢大家!
Try binding directly to dataItem. 尝试直接绑定到dataItem。 You do not need the *ngFor.
您不需要* ngFor。
<kendo-grid-column field="reportLink" title="Report Link" width="50">
<ng-template kendoGridCellTemplate let-dataItem>
<a [href]="dataItem.reportLink">{{dataItem.reportLink}}</a>
</ng-template>
</kendo-grid-column>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.