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

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

1 个答案: