Kendo Grid：使用 HttpClient 而不是 Http 的服务器端分页答案

【问题标题】：Kendo Grid: Server Side Paging with HttpClient rather than HttpKendo Grid：使用 HttpClient 而不是 Http 的服务器端分页
【发布时间】：2018-08-15 03:36:18
【问题描述】：

我在使用 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,
          })
        )
      }

【问题讨论】：

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

【解决方案1】：

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

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

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

}

【讨论】：

【解决方案2】：

我也有同样的问题，但通过从稍微不同的位置获取数据和总计来解决。

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 控制器 和 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
}

【讨论】：