Kendo Grid:使用HttpClient而不是Http进行服务器端分页

时间:2018-03-07 05:54:01

标签: angular kendo-grid kendo-ui-angular2

我在使用HttpClient进行服务器端分页时遇到了困难,而不是旧的Http。

我在努力去除" .map"并处理对GridDataResult接口的响应

旧服务看起来像这样

  constructor(private http: Http) { }

  public fetch(state: DataSourceRequestState): Observable<DataResult> {
    const queryStr = `${toDataSourceRequestString(state)}`; // Serialize the state

    return this.http
      .get(`${this.BASE_URL}?${queryStr}`)
      .map(response => response.json())
      .map(({ results, count }) => /
        (<GridDataResult>
          data: results,
          total: count,
        })
      )
    }

我的新服务怎么样?

我认为它看起来像这样,但无法让它发挥作用

   constructor(private http: HttpClient) { }

    public fetch(state: DataSourceRequestState): Observable<DataResult> {
      const queryStr = `${toDataSourceRequestString(state)}`; // Serialize the state

      return this.http
        .get<GridDataResult>(`${this.BASE_URL}?${queryStr}`)
        .map(({ results, count }) =>
          (<GridDataResult>{             
            data: results,
            total: count,
          })
        )
      }

2 个答案:

答案 0 :(得分:0)

不确定这是否是正确的方法

为了使它工作我将数据映射到任何((data:any)然后能够使用服务器端分页

return this.http
  .get<GridDataResult>(`${this.BASE_URL}?${queryStr}`)
  .map((data: any) =>
    (<GridDataResult>{
      data: data.results,
      total: data.count,
    })
  )

}

答案 1 :(得分:0)

我遇到了与此相同的问题,但通过从稍微不同的位置获取数据和总数来解决此问题。

return this.httpClient
  .get<DataResult>(`${this.BASE_URL}/EmailAccounts?${queryStr}`) // Send the state to the server
  .map( (data: any) =>
    (<GridDataResult>{
      data: data.result.data,
      total: data.result.total,
    })
  )

我查看了使用fiddler从api返回的数据,以查找数据的位置和总数。这适用于 dotnet core 2.0 controller Kendo.Mvc.Extensions ToDataSourceResult函数。

// GET: api/EmailAccounts
[HttpGet("[action]")]
public async Task<JsonResult> EmailAccounts([DataSourceRequest] DataSourceRequest request)
{
    return Json(await _context.EmailAccounts.ToDataSourceResultAsync(request));
}

我的数据格式已退回。

{
    "result":
    {
        "data":[
            {"id":1,"hostName":"TestHost","protocall":1,"port":336,"useSsl":true,"username":"usrname","password":"112345"},
            {"id":2,"hostName":"TestHost","protocall":1,"port":336,"useSsl":true,"username":"usrname","password":"112345"}
        ],
        "total":2,
        "aggregateResults":null,
        "errors":null
    },
    "id":26,
    "exception":null,
    "status":5,
    "isCanceled":false,
    "isCompleted":true,
    "isCompletedSuccessfully":true,
    "creationOptions":8,
    "asyncState":null,
    "isFaulted":false
}