Angular Kendo UI將網格項顯示為超鏈接

Question

我是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作為我的報告鏈接。

有指針嗎？ 謝謝大家！

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>