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

Question

我正在使用此 link 与 Angular 倾斜 Kendo 网格 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 是网格的 [data]。

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

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

Angular Kendo UI Data Grid populate from service

kendo-grid

kendo-ui-angular2

angular