Angular Kendo UI数据网格从服务中填充

Question

我正在使用这个link来使用Angular 6来减少Kendo Grid。我想从服务中获取数据而不是从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方法。

任何想法或指针？谢谢大家。

Answer 1

将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
          );}