Сетка данных Angular Kendo UI заполняется из сервиса - PullRequest
Новая
       8

Сетка данных Angular Kendo UI заполняется из сервиса

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

Я использую эту ссылку , чтобы связать Kendo Grid с Angular 6. Я хочу получать данные из сервиса вместо импорта из файла ts.

Я создал службу и вызвал ее из ловушки ngOnIt (), как показано ниже: 

  ngOnInit() {
    console.log("In ngOnInit method");
    this._reportService.getreports().subscribe(
              results => {this.gridDataVal = results; },
              error => this.errorMessage =<any> error
          );}

public state: State = {
    skip: 0,
    take: 5,
    // Initial filter descriptor
    filter: {
      logic: 'and',
      filters: [{ field: 'reportName', operator: 'contains', value: 'test' }]
    }
};

public gridData: GridDataResult = process(this.gridDataVal, this.state);

public dataStateChange(state: DataStateChangeEvent): void {
    this.state = state;
    this.gridData = process(this.gridDataVal, this.state);
}

gridDataVal - это [данные] для сетки. 

<div *ngIf="gridDataVal">
<kendo-grid  
             [resizable]="true" 
             [data]="gridData" 
             [skip]="state.skip"
             [sort]="state.sort"
             [filter]="state.filter"
             [height]="600"
             [filterable]="true"
             [sortable]="true"
             (dataStateChange)="dataStateChange($event)"
             >
  <kendo-grid-column field="date" title="Date"  width="30" filter="date" format="{0:d}">
  </kendo-grid-column>
  <kendo-grid-column field="reportName" title="Report Name" width="80">
  </kendo-grid-column>
  <kendo-grid-column field="reportLink" title="Report Link" width="80"> 
      <ng-template kendoGridCellTemplate let-dataItem>
            <a target="_blank" rel="noopener noreferrer" [href]="dataItem.reportLink">{{dataItem.reportLink}}</a>
      </ng-template>
  </kendo-grid-column>
  <kendo-grid-column field="reportStatus" title="Report Status" width="40">
  </kendo-grid-column>
  <kendo-grid-column field="region" title="Region" width="40">
    </kendo-grid-column>
</kendo-grid>
</div>

Я получаю ошибку как ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'length' of undefined. Когда я жестко кодирую gridDataVal со значениями, все работает нормально. что-то не так с тем, как я звоню в службу? Я тоже попробовал директиву * ngIf. Код даже не попал в метод ngOnIt.

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

1 Ответ

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

Переместите заполнение ваших gridData в ответ от API, например так: 

public gridData: GridDataResult; 

ngOnInit() {
    console.log("In ngOnInit method");
    this._reportService.getreports().subscribe(
              results => {
                  this.gridDataVal = results; 
                  this.gridData = process(this.gridDataVal, this.state);
              },
              error => this.errorMessage =<any> error
          );}
...