我是Angular Kendo UI的新手,我正在website上浏览Kendo UI Grid System。
我的网格数据包含名称,日期和链接的报告,如下所示:
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"
},]
我想在UI上显示此网格,并将reportLink作为超链接。这是我的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>