Сетка угловая 5 KendoUI Наблюдаемая

Question

У меня есть служба веб-API, отправляющая данные по адресу http://localhost:47269/api/Vto/. Я использую этот сервис в своем сервисе Angular 5 для получения данных, а затем для заполнения сетки KendoUI. Этот код показывает только пустую сетку, без данных и ошибок, регистрирующих консоль. Я подозреваю, что queryStr и hasGroups обрабатываются неправильно, но я не уверен, что делать?

Это служба веб-API, возвращающая данные Json:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;

[RoutePrefix("api/Vto")]
public class VtoController : ApiController
{
    [HttpGet]  
    [AllowAnonymous]  
    [Route("")]
    public HttpResponseMessage  GetVtos()
    {
        List<Vto> Vtos = new List<Vto>();
        Vtos.Add(new Vto(1010765345, "2018-03-24", "9:30:00 AM", "2:30:00 PM", 5, "Browning, Mary", "1:39:00 PM"));
        Vtos.Add(new Vto(1010756567, "2018-03-22", "9:30:00 AM", "12:30:00 PM", 3, "Cruz, Denise", "1:39:00 PM"));
        Vtos.Add(new Vto(1034534568, "2018-03-17", "8:30:00 AM", "2:30:00 PM", 6, "Perez, Breana", "1:39:00 PM"));

        return Request.CreateResponse(HttpStatusCode.OK, Vtos, Configuration.Formatters.JsonFormatter); ;
    }
}

Вот класс обслуживания, пытающийся получить эти данные:

import { Injectable } from '@angular/core';
import { VTO } from './vto';
import { Http, HttpModule } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';
import {
  toDataSourceRequestString,
  translateDataSourceResultGroups,
  translateAggregateResults,
  DataResult,
  DataSourceRequestState
} from '@progress/kendo-data-query';
import 'rxjs/add/operator/map';
import { GridDataResult, DataStateChangeEvent } from '@progress/kendo-angular-grid';

@Injectable()
export class Vtos {
  private vtoUrl = 'http://localhost:47269/api/Vto/';

  constructor(private http: Http) { }

  public getVtos(state: DataSourceRequestState): Observable<DataResult> {

    const queryStr = `${toDataSourceRequestString(state)}`; //serialize the state
    const hasGroups = state.group && state.group.length;
    return this.http
      .get(`${this.vtoUrl}?${queryStr}`) //send the state to the server
      .map(response => response.json())
      .map(({ data, total/*, aggregateResults*/ }) => // process the response
        (<GridDataResult>{
          //if there are groups convert them to compatible format
          data: hasGroups ? translateDataSourceResultGroups(data) : data,
          total: total,
          // convert the aggregates if such exists
          //aggregateResult: translateAggregateResults(aggregateResults)
        })
      )
  }
}

Вот компонент, использующий сервис и для заполнения KendoUI Grid:

import { Component, OnInit } from '@angular/core';
import { Http, HttpModule } from '@angular/http';
import { Observable } from 'rxjs';
import { GroupDescriptor, DataSourceRequestState, DataResult, process, State } from '@progress/kendo-data-query';
import { ExcelExportData } from '@progress/kendo-angular-excel-export';
import { aggregateBy, SortDescriptor, orderBy } from '@progress/kendo-data-query';
import { Vtos } from '../../services/vto.service';

import {
  GridComponent,
  GridDataResult,
  DataStateChangeEvent
} from '@progress/kendo-angular-grid';

@Component({
  selector: 'app-vto-report',
  templateUrl: './vto-report.component.html',
  styleUrls: ['./vto-report.component.css'],
  providers: [Vtos]
})
export class VtoReportComponent {
  public multiple = false;
  public allowUnsort = true;
  public gridData: GridDataResult;
  public state: DataSourceRequestState = {
    skip: 0,
    take: 5,
  };


  constructor(private vtos: Vtos) {
    this.vtos.getVtos(this.state).subscribe(r => this.gridData = r);
  }

  public dataStateChange(state: DataStateChangeEvent): void {
    this.state = state;
    this.vtos.getVtos(state)
      .subscribe(r => this.gridData = r);
  }
}

и HTML для моей сетки:

<kendo-grid [data]="gridData"
            [pageSize]="state.take"
            [skip]="state.skip"
            [sort]="state.sort"
            [sortable]="true"
            [pageable]="true"
            [scrollable]="'scrollable'"
            [groupable]="true"
            [group]="state.group"
            [filterable]="true"
            [filter]="state.filter"
            (dataStateChange)="dataStateChange($event)"
            [height]="370">
  <kendo-grid-column field="EmployeeID" title="Employee ID" [width]="250"></kendo-grid-column>
  <kendo-grid-column field="ReportDate" title="Report Date" width="240" filter="date" format="{0:MM/dd/yyyy}"></kendo-grid-column>
  <kendo-grid-column field="BeginTime" title="Begin Time"></kendo-grid-column>
  <kendo-grid-column field="EndTime" title="End Time"></kendo-grid-column>
  <kendo-grid-column field="TotalHours" title="Total Hours" filter="numeric"></kendo-grid-column>
  <kendo-grid-column field="VTOby" title="VTOby"> </kendo-grid-column>
  <kendo-grid-column field="Timestamp" title="Time stamp"></kendo-grid-column>
</kendo-grid>