Angular Kendo UI 将网格项目显示为超链接

Question

我是 Angular Kendo UI 的新手，我正在 Kendo UI website 上的网格系统。

我的网格数据包含名称、日期和 link 如下的报告：

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 作为 hyperlink 显示此网格。这是我的 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>

我显示 link 我正在遍历 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>

我的问题是报告 link 只显示 http:google.com 的所有报告。

我做错了什么？我希望看到 google.com、yahoo.com 和 msn.com 作为我的报告 links.

有什么指点吗？谢谢大家！

Answer 1

尝试直接绑定到 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>

Angular Kendo UI 将网格项目显示为超链接

Angular Kendo UI show Grid items as hyperlink

kendo-ui

kendo-ui-angular2

angular