Пользовательский интерфейс Angular Kendo показывает элементы сетки в виде гиперссылки - PullRequest
Новая
       10

Пользовательский интерфейс Angular Kendo показывает элементы сетки в виде гиперссылки

0 голосов
/ 05 сентября 2018

Я новичок в Angular Kendo UI, и я прохожу через систему 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"
    },]

Я хочу отобразить эту сетку в пользовательском интерфейсе с 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 для всего отчета. enter image description here

Что я делаю не так? Я ожидаю увидеть google.com, yahoo.com и msn.com в качестве ссылок на отчет.

Есть указатели? Спасибо всем!

1 Ответ

0 голосов
/ 05 сентября 2018

Попробуйте связать напрямую с 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>
...