[英]Angular Kendo UI show Grid items as hyperlink
我是Angular Kendo UI的新手,并且正在网站上浏览Kendo UI网格系统。
我的网格数据包含名称,日期和链接如下的报告:
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"
},]
我想使用reportLink作为超链接在UI上显示此网格。 这是我的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>
我显示我正在遍历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>
我的问题是报告链接仅对所有报告显示http:google.com。
我究竟做错了什么? 我希望看到google.com,yahoo.com和msn.com作为我的报告链接。
有指针吗? 谢谢大家!
尝试直接绑定到dataItem。 您不需要* 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.